<template>
    <div>
        <div style="width: 100%;height: 100%;overflow: hidden;">
            <div id="topBar" style="position: fixed;width: 100%;background: linear-gradient(270deg, #4c97ed 0%, #255ed7 100%)!important;z-index: 99;">
                <bar text="物业管理"></bar>
            </div>
            <div style="width: 100%;height: 100%;overflow: hidden;">
                <div id="fengMap"></div>
            </div>
            <!--<div id="closeTip" @click="closeTip" style="width: 100%;height: 100%;position: fixed;top: 0;left: 0;background:rgba(0,0,0,0.6);z-index: -1;display: none;"></div>-->
            <div id="tip" style="z-index: 10000;">
<!--                <div @click="closeTip"-->
<!--                     style="width: 100%;height: 100%;position: fixed;top: 0;left: 0;background:rgba(0,0,0,0.6);z-index: -1;"></div>-->
                <div id="tipBox1" class="tipBox"
                     style="background: #fff;z-index: 99;position: absolute;bottom: 0;width: 100%;box-shadow:0px 1px 13px 2px rgba(0,0,0,0.1);border-radius:10px 10px 0px 0px;">
                    <div style="padding-top: 8px;margin-bottom: 16px;">
                        <img @click="tipBoxs" src="./images/goTop.png" style="width:40px;height: 10px;" alt="">
                    </div>
                    <div class="tipTop">
                        <div style="flex: 1">
                            <div style="display: flex;align-items: center;">
                                <p v-if="marketDetail.status == 0" style="font-size: 18px;color: #2A2A2A;">
                                    {{marketDetail.brand }}</p>
                                <p v-if="marketDetail.status == 1" style="font-size: 18px;color: #2A2A2A;">
                                    店铺编号：{{marketDetail.marketNum }}</p>
                                <p v-if="marketDetail.status == 2" style="font-size: 18px;color: #2A2A2A;">
                                    店铺编号：{{marketDetail.marketNum }}</p>
                                <div v-if="marketDetail.status == 0"
                                     style="width: 55px;height: 18px;color: #fff;font-size: 12px;line-height: 18px;background: #2F70FF;border-radius: 8px;margin-left: 10px;">
                                    在租中
                                </div>
                                <div v-if="marketDetail.status == 1"
                                     style="width: 55px;height: 18px;color: #fff;font-size: 12px;line-height: 18px;background: #35C077;border-radius: 8px;margin-left: 10px;">
                                    已预定
                                </div>
                                <div v-if="marketDetail.status == 2"leaseTime
                                     style="width: 55px;height: 18px;color: #fff;font-size: 12px;line-height: 18px;background: #EB5D5D;border-radius: 8px;margin-left: 10px;">
                                    可招商
                                </div>
                                <p style="width: 64px;height: 20px;line-height: 20px;background: #EB5D5D;border-radius: 10px;margin-left: 10px;text-align: center;font-size: 10px;color:#fff;" v-if="marketDetail.deadline == 1">即将到期</p>
                            </div>
                            <p v-if="marketDetail.status == 0" style="font-size: 12px;color: #666666;margin-top: 10px;">
                                起：{{leaseTime[0]}} —— 止：{{leaseTime[1]}}</p>
                            <p v-if="marketDetail.status == 1" style="font-size: 12px;color: #666666;margin-top: 10px;">
                                预定时间:</p>
                        </div>
                        <img @click="closeTip" src="./images/closeTop.png" style="width: 21px;height: 21px;" alt="">
                    </div>
                    <div class="tipTops" v-if="marketDetail.status != 2" style="margin-top: 14px;">
                        <p v-if="marketDetail.status == 0" style="font-size: 12px;color: #666666;">租户联系方式</p>
                        <p v-if="marketDetail.status == 1" style="font-size: 12px;color: #666666;">预定人联系方式</p>
                        <div v-if="marketDetail.status != 2"
                             style="display: flex;align-items: center;margin-top: 15px;">
                            <img src="./images/Contacts.png" style="width:20px;height: 20px;" alt="">
                            <p style="margin-left: 10px;color: #333333;font-size: 15px;">联系人：{{marketDetail.tenantName
                                }}</p>
                        </div>
                        <div v-if="marketDetail.status != 2"
                             style="display: flex;align-items: center;margin-top: 11px;">
                            <img src="./images/phone.png" style="width:20px;height: 20px;" alt="">
                            <p style="margin-left: 10px;color: #333333;font-size: 15px;">电话：{{marketDetail.tenantTel
                                }}</p>
                        </div>
                    </div>
                    <div class="tipBottom" v-if="tipBox">
                        <!--详细信息-->
                        <p class="tipTitle">详细信息</p>
                        <div v-if="marketDetail.status != 2" class="tipTitle-txt">
                            <p>商铺性质：{{marketDetail.busyCat}}</p>
                        </div>
                        <div v-if="marketDetail.status == 0" class="tipTitle-txt">
                            <p>品牌名称：{{marketDetail.brand }}</p>
                        </div>
                        <div v-if="marketDetail.status == 1" class="tipTitle-txt">
                            <p>定金价格：{{marketDetail.frontMoney }}</p>
                        </div>
                        <div class="tipTitle-txt">
                            <p>租金价格：{{marketDetail.monthRent }}万/月</p>
                        </div>
                        <div v-if="marketDetail.status == 0" class="tipTitle-txt">
                            <p>合同编号：{{marketDetail.contractNum }}</p> <span>合同详情</span>
                        </div>
                        <div v-if="marketDetail.status == 0" class="tipTitle-txt">
                            <p>商铺编号：{{marketDetail.marketNum }}</p>
                        </div>
                        <div class="tipTitle-txt">
                            <p>可用面积：{{marketDetail.usableArea }}㎡</p>
                        </div>
                        <!--建筑规格-->
                        <p class="tipTitle">建筑规格</p>
                        <div class="architecture">
                            <div style="width:216px;height: 137px;background: #F7F7F7;">
                                <img :src="marketDetail.buildUrl" alt="" style="width: 100%;height: 100%;"/>
                            </div>
                            <div class="architecture-left">
                                <p class="architectureName">长：{{marketDetail.length}}m</p>
                                <p class="architectureName">宽：{{marketDetail.width}}m</p>
                                <p class="architectureName">高：{{marketDetail.height}}m</p>
                                <p style="padding-top: 8px;font-size: 15px;color: #333333;">建筑面积</p>
                                <p style="margin-top: 8px;font-size: 18px;color: #333333;">{{marketDetail.totalArea }}
                                    <span
                                            style="font-size: 15px;">㎡</span></p>
                            </div>
                        </div>
                        <!--联系人-->
                        <div v-if="marketDetail.status != 2">
                            <p class="tipTitle">负责人联系方式</p>
                            <div style="display: flex;margin-top: 16px;">
                                <p style="color:#333333;font-size: 15px;flex: 1;">负责人：{{marketDetail.picName }}</p>
                                <p style="color:#333333;font-size: 15px;flex: 1;">电话：{{marketDetail.picTel }}</p>
                            </div>
                        </div>
                        <!--意向客户-->
                        <div v-if="marketDetail.status == 2">
                            <p class="tipTitle">意向客户</p>
                            <p @click="intention(marketDetail.fid)"
                               style="width:328px;height: 40px;background: #6394FF;border-radius: 20px;color: #fff;font-size: 14px;text-align: center;line-height: 40px;margin: 26px auto 0 auto;">
                                查看意向客户</p>
                        </div>
                    </div>
                </div>
            </div>
            <!--保洁保安-->
            <div id="cleaning" style="z-index: 1000;">
                <div class="tipBox">
                    <div style="margin-top: 8px;margin-bottom: 16px;position: relative;">
                        <img @click="closeClear" src="./images/goDown.png" style="width:39px;height: 9px;" alt="">
                        <img @click="closeClear" src="./images/closeTop.png" style="width: 21px;height: 21px;position: absolute;right:18px;top:10px;"
                             alt="">
                    </div>
                    <div class="tipTop" style="border: none;">
                        <div style="flex: 1">
                            <div style="display: flex;align-items: center;">
                                <p style="font-size: 18px;color: #2A2A2A;">保洁人员</p>
                                <div style="width: 70px;height: 20px;background: #4ACA99;display: flex;align-items: center;box-shadow:0px 1px 2px 0px rgba(59,146,113,1);border-radius: 2px;margin-left: 20px;">
                                    <img src="./images/cleanIcon.png" style="width: 10px;height: 12px;margin-left: 4px;" alt="">
                                    <p style="color: #fff;font-size: 11px;margin-left: 4px;height: 20px;line-height: 22px;">导出数据</p>
                                </div>
<!--                                ```<div style="flex: 1;text`-align: right;">-->
<!--                                    <img @click="closeClear" src="./images/closeTop.png" style="width: 21px;height: 21px;"-->
<!--                                         alt="">-->
<!--                                </div>```-->
<!--                                <img @click="closeClear" src="./images/closeTop.png" style="width: 21px;height: 21px;"-->
<!--                                     alt="">-->
                            </div>
                        </div>
                    </div>
                    <div class="cleaningList">
                        <div style="display: flex;width: 100%;height: 36px;background: #F2F2F2;">
                            <p style="flex: 1;text-align: center;color: #222222;font-size: 15px;line-height: 36px;">
                                姓名</p>
                            <p style="flex: 1;text-align: center;color: #222222;font-size: 15px;line-height: 36px;">
                                负责区域</p>
                            <p style="flex: 1;text-align: center;color: #222222;font-size: 15px;line-height: 36px;">
                                打扫时间</p>
                        </div>
                        <li :class="cleanIdx == idx?'cleaningList-detail2':'cleaningList-detail'" v-for="(item,idx) in cleanerlist"
                            @click="cleaningBtn(item.regionList,idx)">
                            <p style="flex: 1;text-align: center;color: #666666;font-size: 15px;line-height: 36px;">
                                {{item.name}}</p>
                            <p style="flex: 1;text-align: center;color: #666666;font-size: 15px;line-height: 36px;">
                                {{item.region}}</p>
                            <p style="flex: 1;text-align: center;color: #666666;font-size: 15px;line-height: 36px;">
                                {{item.workTime}}</p>
                        </li>
                    </div>
                </div>
            </div>
            <!--保安-->
            <div id="cleaning2" style="z-index: 1000;">
                <div class="tipBox">
                    <div style="margin-top: 8px;margin-bottom: 16px;">
                        <img @click="closeClear2" src="./images/goDown.png" style="width:39px;height: 9px;" alt="">
                        <img @click="closeClear2" src="./images/closeTop.png" style="width: 21px;height: 21px;position: absolute;right:18px;top:10px;"
                             alt="">
                    </div>
                    <div class="tipTop" style="border: none;">
                        <div style="flex: 1">
                            <div style="display: flex;align-items: center;">
                                <p style="font-size: 18px;color: #2A2A2A;">保安人员</p>

                                <div style="width: 70px;height: 20px;background: #4ACA99;display: flex;align-items: center;box-shadow:0px 1px 2px 0px rgba(59,146,113,1);border-radius: 2px;margin-left: 20px;">
                                    <img src="./images/cleanIcon.png" style="width: 10px;height: 12px;margin-left: 4px;" alt="">
                                    <p style="color: #fff;font-size: 11px;margin-left: 4px;height: 20px;line-height: 22px;">导出数据</p>
                                </div>
<!--                                <div style="flex: 1;text-align: right;">-->
<!--                                    <img @click="closeClear2" src="./images/closeTop.png" style="width: 21px;height: 21px;"-->
<!--                                         alt="">-->
<!--                                </div>-->
                            </div>
                        </div>
                    </div>
                    <div class="cleaningList">
                        <div style="display: flex;width: 100%;height: 36px;background: #F2F2F2;">
                            <p style="flex: 1;text-align: center;color: #222222;font-size: 15px;line-height: 36px;">
                                姓名</p>
                            <p style="flex: 1;text-align: center;color: #222222;font-size: 15px;line-height: 36px;">
                                巡逻路线</p>
                            <p style="flex: 1;text-align: center;color: #222222;font-size: 15px;line-height: 36px;">
                                巡逻时间</p>
                        </div>
                        <li :class="cleanIdx2 == idx?'cleaningList-detail2':'cleaningList-detail'" v-for="(item,idx) in cleanerlist" @click="security(item.route,idx)">
                            <p style="flex: 1;text-align: center;color: #666666;font-size: 15px;line-height: 36px;">
                                {{item.name}}</p>
                            <p style="flex: 1;text-align: center;color: #666666;font-size: 15px;line-height: 36px;">
                                {{item.routeName}}</p>
                            <p style="flex: 1;text-align: center;color: #666666;font-size: 15px;line-height: 36px;">
                                {{item.shiftTime}}</p>
                        </li>
                    </div>
                </div>
            </div>
<!--            能源-->
            <div id="cleaning3" style="z-index: 1000;">
                <div class="tipBox">
                    <div style="margin-top: 8px;margin-bottom: 16px;">
                        <img @click="closeClear3" src="./images/goDown.png" style="width:39px;height: 9px;" alt="">
                    </div>
                    <div class="cleaningList">
                        <div style="display: flex;width: 100%;height: 32px;background: #F2F2F2;">
                            <p style="flex: 1;text-align: center;color: #222222;font-size: 15px;line-height: 32px;">
                                名称</p>
                            <p style="flex: 1;text-align: center;color: #222222;font-size: 15px;line-height: 32px;">
                                用量</p>
                            <p style="flex: 1;text-align: center;color: #222222;font-size: 15px;line-height: 32px;">
                                状态</p>
                        </div>
                        <li v-for="(item,trrIndex) in cunsume" class="cleaningList-detail">
                            <p v-if="trrIndex == 0" style="flex: 1;text-align: center;color: #666666;font-size: 15px;line-height: 32px;">
                                水</p>
                            <p v-if="trrIndex == 1" style="flex: 1;text-align: center;color: #666666;font-size: 15px;line-height: 32px;">
                                电</p>
                            <p v-if="trrIndex == 2" style="flex: 1;text-align: center;color: #666666;font-size: 15px;line-height: 32px;">
                                气</p>
                            <p v-if="trrIndex == 0" style="flex: 1;text-align: center;color: #666666;font-size: 15px;line-height: 32px;">
                                {{item.value}}t</p>
                            <p v-if="trrIndex == 1" style="flex: 1;text-align: center;color: #666666;font-size: 15px;line-height: 32px;">
                                {{item.value}}kw</p>
                            <p v-if="trrIndex == 2" style="flex: 1;text-align: center;color: #666666;font-size: 15px;line-height: 32px;">
                                {{item.value}}t</p>
                            <p v-if="item.state == 0" style="flex: 1;text-align: center;color: #4BC093;font-size: 15px;line-height: 32px;">
                                正常</p>
                            <p v-if="item.state == 1" style="flex: 1;text-align: center;color: #FF3C3C;font-size: 15px;line-height: 32px;">
                                超标</p>
                        </li>
                    </div>
                </div>
            </div>
            <div style="display: none;">
                <!--事件按钮-->
                <div style="position: fixed;top: 50px;left: 0;">
                    <p><input id="input" type="checkbox" name="layer" value="隐藏公共设施标注层"
                              @click="changeFacLayerVis(200004)"/>电梯
                    </p>
                </div>
                <div style="position: fixed;top: 50px;left: 60px;">
                    <p><input id="input9" type="checkbox" name="layer" value="隐藏公共设施标注层"
                              @click="changeFacLayerVis(600014)"/>识别器</p>
                </div>
                <div style="position: fixed;top: 50px;left: 120px;">
                    <p><input id="input10" type="checkbox" name="layer" value="隐藏公共设施标注层"
                              @click="changeFacLayerVis(600013)"/>安防</p>
                </div>
                <!--客流量-->
                <div style="position: fixed;top: 70px;left: 0;">
                    <p><input id="input2" type="checkbox" name="layer" value="隐藏公共设施标注层" @click="information(1)"/>客流量
                    </p>
                </div>
                <!--销售额-->
                <div style="position: fixed;top: 70px;left: 80px;">
                    <p><input id="input6" type="checkbox" name="layer" value="隐藏公共设施标注层" @click="information(2)"/>销售额
                    </p>
                </div>
                <!--坪效-->
                <div style="position: fixed;top: 70px;left: 150px;">
                    <p><input id="input7" type="checkbox" name="layer" value="隐藏公共设施标注层" @click="information(3)"/>坪效</p>
                </div>
                <!--集课力-->
                <div style="position: fixed;top: 70px;left: 200px;">
                    <p><input id="input8" type="checkbox" name="layer" value="隐藏公共设施标注层" @click="information(4)"/>集客力
                    </p>
                </div>
                <div style="position: fixed;top: 90px;left: 0;">
                    <p><input id="input3" type="checkbox" name="layer" value="隐藏公共设施标注层" @click="showDtataHeatmap"/>热力图
                    </p>
                </div>
                <div style="position: fixed;top: 110px;left: 0;">
                    <p><input id="input4" type="checkbox" name="layer" value="隐藏公共设施标注层" @click="staff"/>保洁</p>
                </div>
                <div style="position: fixed;top: 110px;left: 60px;">
                    <p><input id="input11" type="checkbox" name="layer" value="隐藏公共设施标注层" @click="staff2"/>保安</p>
                </div>
                <div style="position: fixed;top: 130px;left: 0;">
                    <p><input id="input5" type="checkbox" name="layer" value="隐藏公共设施标注层" @click="equipment"/>设备</p>
                </div>
                <div style="position: fixed;top: 150px;left: 0;">
                    <button @click="addMarkerFunc">添加线标注</button>
                </div>
            </div>

            <!--设备弹框 0正常1故障-->
            <div class="equipment" id="equipment" style="display: none">
                <div class="equipment2" @click="equipment2"></div>
                <div class="equipmentBox">
                    <div style="display: flex;align-items: center;margin: 18px 0 0 30px;padding-top: 18px;">
                        <p v-if="typeID ==600014" style="font-size: 15px;color: #222222;">识别器</p>
                        <p v-if="typeID ==600013" style="font-size: 15px;color: #222222;">安防设备</p>
                        <p v-if="typeID ==200004" style="font-size: 15px;color: #222222;">电梯</p>
                        <p v-if="equipdetail.status == 0" style="width: 42px;height: 15px;background: #35C077;border-radius: 9px;font-size: 10px;color: #fff;
                    line-height: 15px;text-align: center;margin-left: 8px;">正常</p>
                        <p v-if="equipdetail.status == 1" style="width: 42px;height: 15px;background: #EB5D5D;border-radius: 9px;font-size: 10px;color: #fff;
                    line-height: 15px;text-align: center;margin-left: 8px;">故障</p>
                    </div>
                    <p style="margin:10px 0 0 30px;color: #666666;font-size: 12px;">回测日期：{{equipdetail.plot_time}} </p>
                    <p style="width: 100%;height: 1px;background: #E8E8E8;margin-top: 12px;"></p>
                    <p v-if="typeID ==600014" style="color:#333333;font-size: 15px;margin-left: 30px;margin-top: 10px;">
                        监控编号：{{equipdetail.equipNum}}</p>
                    <p v-if="typeID ==600013" style="color:#333333;font-size: 15px;margin-left: 30px;margin-top: 10px;">
                        上次维修人：{{equipdetail.repair}}</p>
                    <p v-if="typeID ==200004" style="color:#333333;font-size: 15px;margin-left: 30px;margin-top: 10px;">
                        上次维修人：{{equipdetail.repair}}</p>
                    <p v-if="typeID ==600014" style="color:#333333;font-size: 15px;margin-left: 30px;margin-top: 10px;">
                        位置：{{equipdetail.region}}</p>
                    <p v-if="typeID ==600013" style="color:#333333;font-size: 15px;margin-left: 30px;margin-top: 10px;">
                        维修时间：{{equipdetail.mtcTime}}</p>
                    <p v-if="typeID ==200004" style="color:#333333;font-size: 15px;margin-left: 30px;margin-top: 10px;">
                        维修时间：{{equipdetail.mtcTime}}</p>
                    <p v-if="typeID ==600013 && equipdetail.status == 0" style="width:200px;height: 28px;margin: 16px auto 0 auto;background: #6394FF;border-radius: 20px;
                font-size: 12px;color: #fff;line-height: 28px;text-align: center;" @click="btnClick">查看监控画面</p>
                </div>
            </div>
            <div style="display: none;" id="video">
                <img @click="closeBtn" src="./images/closeVideo.png"
                     style="z-index: 100000;width: 30px;height: 30px;position: fixed;top:160px;right: 20px;" alt="">
                <video
                        id="myVideo"
                        class="video-js vjs-default-skin vjs-big-play-centered  "
                        controls
                        preload="auto"
                        data-setup='{}  '
                >
                    <source
                            src="https://static2.superkangaroo.net/uploads/2018/6/14/8045812983436535.mp4"
                            type="video/mp4"
                    >
                </video>


            </div>
            <!--客流量bar-->
            <div id="floatBar" style="margin-top: 60px;display: none;">
                <div class="floatBar">
                    <div>
                        <img src="../../assets/imgs/map/person.png" alt="">
                    </div>
                    <div class="people">截止当今日总客流人数为<p style="color: #2F70FF;" id="floatBarNum">122222</p>人</div>
                </div>
                <div v-if="a == 1"
                     style="width: 130px;height: 70px;margin-left:20px;background-color: #fff;padding: 8px 10px;box-sizing: border-box;border: 1px solid #E8E8E8;border-radius: 5px;">
                    <div style="display: flex;justify-content: flex-start">
                        <div style="width: 15px;height: 15px;background-color: #588CFF"></div>
                        <div style="margin-left: 10px;font-size: 14px">0-1000人</div>
                    </div>
                    <div style="display: flex;justify-content: flex-start">
                        <div style="display: flex;justify-content: flex-start;margin-top: 5px">
                            <div style="width: 15px;height: 15px;background-color: #98DC91"></div>
                            <div style="margin-left: 10px;font-size: 14px">1000-1500人</div>
                        </div>
                    </div>
                    <div style="display: flex;justify-content: flex-start">
                        <div style="display: flex;justify-content: flex-start;margin-top: 5px">
                            <div style="width: 15px;height: 15px;background-color: #FFE88B"></div>
                            <div style="margin-left: 10px;font-size: 14px">1500人以上</div>
                        </div>
                    </div>
                </div>
            </div>
            <!--销售额-->
            <div id="floatBar2" style="margin-top: 60px;display: none;">
                <div class="floatBar">
                    <div>
                        <img style="width: 14px;height: 14px;" src="../../assets/imgs/map/saleTwo.png" alt="">
                    </div>
                    <div class="people">截止当前今日销售总额为<p style="color: #2F70FF;" id="floatBarNum2">122222</p>元</div>
                </div>
                <div v-if="a == 1"
                     style="width: 140px;height: 70px;margin-left:20px;background-color: #fff;padding: 8px 10px;box-sizing: border-box;border: 1px solid #E8E8E8;border-radius: 5px;">
                    <div style="display: flex;justify-content: flex-start">
                        <div style="width: 15px;height: 15px;background-color: #588CFF"></div>
                        <div style="margin-left: 5px;font-size: 14px">0-5000元</div>
                    </div>
                    <div style="display: flex;justify-content: flex-start">
                        <div style="display: flex;justify-content: flex-start;margin-top: 5px">
                            <div style="width: 15px;height: 15px;background-color: #98DC91"></div>
                            <div style="margin-left: 5px;font-size: 14px">5000-12000元</div>
                        </div>
                    </div>
                    <div style="display: flex;justify-content: flex-start">
                        <div style="display: flex;justify-content: flex-start;margin-top: 5px">
                            <div style="width: 15px;height: 15px;background-color: #FFE88B"></div>
                            <div style="margin-left: 5px;font-size: 14px">12000元以上</div>
                        </div>
                    </div>
                </div>
            </div>
            <!--集客力-->
            <div id="floatBar3"
                 style="margin-top: 40px;display:none;height: 80px;z-index: 100000;position: fixed;z-index: 1000;width: 100%;">
                <div style="width: 100%;height: 70px;align-items: center;display: flex;background: #fff;box-shadow:0px 2px 6px 2px rgba(0,0,0,0.06);">
                    <p @click="floatBar3(0)"
                       style="flex: 1;text-align: center;font-size: 14px;color: #333333;margin-top: 20px;">
                        <span :class="{'floatBar3':floatBarNum == 0}">当天</span>
                    </p>
                    <p @click="floatBar3(1)" style="font-size: 14px;color: #333333;margin-top: 20px;">
                        <span :class="{'floatBar3':floatBarNum == 1}">本月</span>
                    </p>
                    <p @click="floatBar3(2)"
                       style="flex: 1;text-align: center;font-size: 14px;color: #333333;margin-top: 20px;">
                        <span :class="{'floatBar3':floatBarNum == 2}">本年</span>
                    </p>
                </div>
                <div v-if="a == 1"
                     style="width: 130px;height: 70px;margin-left:20px;background-color: #fff;padding: 8px 10px;box-sizing: border-box;border: 1px solid #E8E8E8;border-radius: 5px;margin-top: 10px;">
                    <div style="display: flex;justify-content: flex-start">
                        <div style="width: 15px;height: 15px;background-color: #588CFF"></div>
                        <div style="margin-left: 5px;font-size: 14px">0-50人/㎡</div>
                    </div>
                    <div style="display: flex;justify-content: flex-start">
                        <div style="display: flex;justify-content: flex-start;margin-top: 5px">
                            <div style="width: 15px;height: 15px;background-color: #98DC91"></div>
                            <div style="margin-left: 5px;font-size: 14px">50-100人/㎡</div>
                        </div>
                    </div>
                    <div style="display: flex;justify-content: flex-start">
                        <div style="display: flex;justify-content: flex-start;margin-top: 5px">
                            <div style="width: 15px;height: 15px;background-color: #FFE88B"></div>
                            <div style="margin-left: 5px;font-size: 14px">100人/㎡以上</div>
                        </div>
                    </div>
                </div>
            </div>
            <!--坪效-->
            <div id="floatBar4"
                 style="margin-top: 40px;display:none;height: 80px;z-index: 100000;position: fixed;z-index: 1000;width: 100%;">
                <div style="width: 100%;height: 70px;align-items: center;display: flex;background: #fff;box-shadow:0px 2px 6px 2px rgba(0,0,0,0.06);">
                    <p @click="floatBar4(0)"
                       style="flex: 1;text-align: center;font-size: 14px;color: #333333;margin-top: 20px;">
                        <span :class="{'floatBar3':floatBarNum2 == 0}">当天</span>
                    </p>
                    <p @click="floatBar4(1)" style="font-size: 14px;color: #333333;margin-top: 20px;">
                        <span :class="{'floatBar3':floatBarNum2 == 1}">本月</span>
                    </p>
                    <p @click="floatBar4(2)"
                       style="flex: 1;text-align: center;font-size: 14px;color: #333333;margin-top: 20px;">
                        <span :class="{'floatBar3':floatBarNum2 == 2}">本年</span>
                    </p>
                </div>
                <div v-if="a == 1"
                     style="width: 130px;height: 70px;margin-left:20px;background-color: #fff;padding: 8px 10px;box-sizing: border-box;border: 1px solid #E8E8E8;border-radius: 5px;margin-top: 10px;">
                    <div style="display: flex;justify-content: flex-start">
                        <div style="width: 15px;height: 15px;background-color: #588CFF"></div>
                        <div style="margin-left: 10px;font-size: 14px">0-5元/㎡</div>
                    </div>
                    <div style="display: flex;justify-content: flex-start">
                        <div style="display: flex;justify-content: flex-start;margin-top: 5px">
                            <div style="width: 15px;height: 15px;background-color: #98DC91"></div>
                            <div style="margin-left: 10px;font-size: 14px">5-10元/㎡</div>
                        </div>
                    </div>
                    <div style="display: flex;justify-content: flex-start">
                        <div style="display: flex;justify-content: flex-start;margin-top: 5px">
                            <div style="width: 15px;height: 15px;background-color: #FFE88B"></div>
                            <div style="margin-left: 10px;font-size: 14px">10元/㎡以上</div>
                        </div>
                    </div>
                </div>
            </div>
            <!--切换主题-->
<!--            <div @click="change1" style="position: fixed;z-index: 99;left: 10px;bottom:200px;">切换主题1</div>-->
<!--            <div @click="change2" style="position: fixed;z-index: 99;left: 10px;bottom:160px;">切换主题2</div>-->
            <!--楼层切换组件-->
            <div id="btnsFloor" :class="height == 1?'btnsFloor2':'btnsFloor'">
                <!--多层/单层切换按钮-->
                <span style="display: none" @click="changeViews" :class="{'multi':showIndex == 1}"></span>
                <!--楼层数据-->
                <ul id="floors"></ul>
            </div>
<!--            底部bar-->
            <div class="mapBar">
                <div class="mapBar-img" @click="barBtn1" style="margin-left: 46px;">
                    <img v-if="barIndex == 0"  src="./images/map2.png" class="mapBar-img2" alt="">
                    <img v-else  src="./images/map1.png" class="mapBar-img2" alt="">
                </div>
                <div class="mapBar-img" style="margin-left: 26px;position: relative;" >
                    <img @click="barBtn2" v-if="barIndex == 1" src="./images/map4.png" class="mapBar-img2" alt="">
                    <img @click="barBtn2" v-else src="./images/map3.png" class="mapBar-img2" alt="">
                    <!--            保安保洁-->
                    <div v-if="barIndex == 1" class="mapPeople">
                        <div class="mapPeople-box" @click="barBtn4">
                            <img v-if="barIndex2 == 1" src="./images/map10.png" style="width: 36px;height: 36px;" alt="">
                            <img v-else src="./images/map9.png" style="width: 36px;height: 36px;" alt="">
                            <p :class="barIndex2 == 1?'mapPeople-name2':'mapPeople-name'">保安</p>
                        </div>
                        <div class="mapPeople-box2" @click="barBtn5">
                            <img v-if="barIndex2 == 2" src="./images/map12.png" style="width: 36px;height: 36px;" alt="">
                            <img v-else src="./images/map11.png" style="width: 36px;height: 36px;" alt="">
                            <p :class="barIndex2 == 2?'mapPeople-name2':'mapPeople-name'">保洁</p>
                        </div>
                    </div>
                </div>
                <div class="mapBar-img" style="margin-left: 26px;position: relative;">
                    <img @click="barBtn3" v-if="barIndex == 2" src="./images/map6.png" class="mapBar-img2" alt="">
                    <img @click="barBtn3" v-else src="./images/map5.png" class="mapBar-img2" alt="">
                    <div class="mapInformation" v-if="barIndex == 2">
                        <div class="mapPeople-box3" @click="barBtn6">
                            <img v-if="barIndex3 == 1" src="./images/map15.png" style="width: 36px;height: 36px;" alt="">
                            <img v-else src="./images/map14.png" style="width: 36px;height: 36px;" alt="">
                            <p :class="barIndex3 == 1?'mapPeople-name2':'mapPeople-name'">安防</p>
                        </div>
                        <div class="mapPeople-box4" @click="barBtn7">
                            <img v-if="barIndex3 == 2" src="./images/map17.png" style="width: 36px;height: 36px;" alt="">
                            <img v-else src="./images/map16.png" style="width: 36px;height: 36px;" alt="">
                            <p :class="barIndex3 == 2?'mapPeople-name2':'mapPeople-name'">电梯</p>
                        </div>
                        <div class="mapPeople-box4" @click="barBtn8">
                            <img v-if="barIndex3 == 3" src="./images/map19.png" style="width: 36px;height: 36px;" alt="">
                            <img v-else src="./images/map18.png" style="width: 36px;height: 36px;" alt="">
                            <p :class="barIndex3 == 3?'mapPeople-name2':'mapPeople-name'">门禁</p>
                        </div>
                    </div>
                </div>
            </div>

<!--            设备二级-->

<!--          v-if="barIndex == 1"   保安巡逻路线展示-->
            <div v-if="barIndex2 == 1">
               <div style="display: flex;align-items: center;position: fixed;left: 20px;top: 70px;z-index:10;">
                   <div style="width: 32px;height: 3px;background: #2F70FF;"></div>
                   <p style="font-size: 13px;color: #333333;margin-left: 14px;">保安巡逻路线</p>
               </div>
               <div v-if="barIndex6 == 0" style="position: fixed;top: 70px;right: 14px;z-index: 10;" @click="staff2">
                   <div style="width: 38px;height: 38px;background: #fff;border-radius:50px;box-shadow:0px 1px 13px 2px rgba(0,0,0,0.06);margin-left: 5px;">
                       <img src="./images/map20.png" style="width: 20px;height: 14px;margin-top:12px;" alt="">
                   </div>
                   <p style="font-size: 13px;color: #333333;text-align: center;margin-top: 10px;">保安列表</p>
               </div>
           </div>
            <div v-if="barIndex2 == 2">
                <div style="display: flex;align-items: center;position: fixed;left: 20px;top: 70px;z-index:10;">
                    <div style="width: 13px;height: 13px;background: #B760F9;border-radius: 1px;"></div>
                    <p style="font-size: 13px;color: #333333;margin-left: 14px;">保洁打扫区域</p>
                </div>
                <div v-if="barIndex6 == 2" style="position: fixed;top: 70px;right: 14px;z-index: 10;" @click="staff">
                    <div style="width: 38px;height: 38px;background: #fff;border-radius:50px;box-shadow:0px 1px 13px 2px rgba(0,0,0,0.06);margin-left: 5px;">
                        <img src="./images/map20.png" style="width: 20px;height: 14px;margin-top:12px;" alt="">
                    </div>
                    <p style="font-size: 13px;color: #333333;text-align: center;margin-top: 10px;">保洁列表</p>
                </div>
            </div>
<!--            该层楼没有门禁提示框-->
            <div class="control" style="display: none;" id="control">
                <div @click="closeControl" class="controlBox" style="z-index: 11;"></div>
                <div class="controlBox2" style="z-index: 12;">
                    <img src="./images/control1.png" style="width: 60px;height: 63px;margin-top: 20px;" alt="">
                    <p style="font-size: 15px;color: #666666;padding-top: 4px;text-align: center;">该楼层没有门禁</p>
                    <p @click="closeControl" style="margin:23px auto 0 auto;width: 208px;height: 38px;text-align: center;line-height: 38px;background:linear-gradient(270deg,rgba(92,169,255,1) 0%,rgba(67,137,255,1) 54%,rgba(47,112,255,1) 100%);box-shadow:0px 4px 5px 0px rgba(36,83,173,0.49);border-radius:19px;color:#fff;font-size: 13px;">确定</p>
                </div>
            </div>
            <div class="rentColor" v-if="barIndex == 0">
                <div style="display: flex;align-items: center;margin-bottom: 14px;">
                    <img src="./images/color27.png" style="width: 17px;height: 15px;" alt="">
                    <p style="font-size: 12px;color: #333333;margin-left: 16px;">正常</p>
                </div>
                <div style="display: flex;align-items: center;margin-bottom: 14px;">
                    <img src="./images/color28.png" style="width: 17px;height: 15px;" alt="">
                    <p style="font-size: 12px;color: #333333;margin-left: 16px;">超标</p>
                </div>
            </div>

<!--            正常故障-->
<!--            设备-->
            <div v-if="barIndex3 == 1" class="stateThis">
                <img src="./images/shebei1.png" class="stateThis-img" alt="">
                <p class="stateThis-txt">正常</p>
                <img src="./images/shebei5.png" class="stateThis-img" alt="">
                <p class="stateThis-txt">故障</p>
            </div>
<!--            电梯-->
            <div v-if="barIndex3 == 2" class="stateThis">
                <img src="./images/shebei3.png" class="stateThis-img" alt="">
                <p class="stateThis-txt">正常</p>
                <img src="./images/shebei6.png" class="stateThis-img" alt="">
                <p class="stateThis-txt">故障</p>
                <img src="./images/shebei4.png" class="stateThis-img" alt="">
                <p class="stateThis-txt">正常</p>
                <img src="./images/shebei7.png" class="stateThis-img" alt="">
                <p class="stateThis-txt">故障</p>
            </div>
<!--            门禁-->
            <div v-if="barIndex3 == 3" class="stateThis">
                <img src="./images/shebei2.png" class="stateThis-img" alt="">
                <p class="stateThis-txt">正常</p>
                <img src="./images/shebei8.png" class="stateThis-img" alt="">
                <p class="stateThis-txt">故障</p>
            </div>


        </div>
    </div>

</template>

<script>
    import mapjs from '../../mapJs/fengmap.min.js'
    import fengmap from "../../mapJs/fengmap2.min";
    import titles from "../../components/titleBar";
    import bar from "../../components/topBar";
    export default {
        name: "mapIndex",
        data() {
            return {
                cleanIdx2:-1,
                cleanIdx:-1,
                barIndex:0,
                barIndex2:0,
                barIndex3:0,
                kDate:0,
                a: 1,
                scale: 1,
                drawer: false,
                direction: 'btt',
                tipBox: false,
                checked: false,
                isMap: '',
                searchAnalyser: '',
                // 热力图变量
                dataHeatmap: false,
                heatmapInstance: null,
                heatmapInstance2: null,
                groupLayer: '',
                randomHeatmap: false,
                popMarkerList: [],
                alertMars:[],
                cleaning: false,
                // drawer: false,
                idx: 10,
                inx: 0,
                listData: [
                    {
                        title: '指标数据',
                        array: [
                            {
                                src: require('../../assets/imgs/map/costomer.png'),
                                srcTwo: require('../../assets/imgs/map/costomerOne.png'),
                                name: '客流量',
                                check: false,
                            },
                            {
                                src: require('../../assets/imgs/map/sale.png'),
                                srcTwo: require('../../assets/imgs/map/saleOne.png'),
                                name: '销售额',
                                check: false,
                            },
                            {
                                src: require('../../assets/imgs/map/collector.png'),
                                srcTwo: require('../../assets/imgs/map/collectorOne.png'),
                                name: '集客力',
                                check: false,
                            },
                            {
                                src: require('../../assets/imgs/map/collector.png'),
                                srcTwo: require('../../assets/imgs/map/collectorOne.png'),
                                name: '坪效值',
                                check: false,
                            },
                        ]
                    },
                    {
                        title: '热力图',
                        array: [
                            {
                                src: require('../../assets/imgs/map/passenger.png'),
                                srcTwo: require('../../assets/imgs/map/passengerOne.png'),
                                name: '客流',
                                check: false,
                            },
                            {
                                src: require('../../assets/imgs/map/PlateauOne.png'),
                                srcTwo: require('../../assets/imgs/map/plateau.png'),
                                name: '坪效',
                                check: false,
                            }
                        ]
                    },
                    {
                        title: '运维',
                        array: [
                            {
                                src: require('../../assets/imgs/map/security.png'),
                                srcTwo: require('../../assets/imgs/map/securityOne.png'),
                                name: '安防',
                                check: false,
                            },
                            {
                                src: require('../../assets/imgs/map/elevatorOne.png'),
                                srcTwo: require('../../assets/imgs/map/elevator.png'),
                                name: '电梯',
                                check: false,
                            },
                            {
                                src: require('../../assets/imgs/map/recognizer.png'),
                                srcTwo: require('../../assets/imgs/map/RecognizerOne.png'),
                                name: '识别器',
                                check: false,
                            },
                            {
                                src: require('../../assets/imgs/map/securitypeople.png'),
                                srcTwo: require('../../assets/imgs/map/securitypeopleOne.png'),
                                name: '保安',
                                check: false,

                            },
                            {
                                src: require('../../assets/imgs/map/cleaningOne.png'),
                                srcTwo: require('../../assets/imgs/map/cleaning.png'),
                                name: '保洁',
                                check: false,
                            }
                        ]
                    }
                ],
                marketDetail: [],
                leaseTime: [],
                spec: [],
                cleanerlist: [],
                cleanDetail: [],
                securityList: [],
                resultArr: [],
                equipdetail: [],
                typeID: '',
                sheB: [],
                isList: [],
                isClose: false,
                searchAnalyser: [],
                floatBarNum: 0,
                floatBarNum2: 0,
                flg: '',
                searchValue: '',
                defaultIndex:3,
                defaultFocusID:1,
                showIndex:0,
                // 保安列表按钮
                barIndex6:0,
                // 安防
                lista:[],
                cunsume:[],
                // 能源
                renta:[],
                rentb:[],
                height:0

            };
        },
        components: {
            titles,
            bar,
        },
        computed: {
        },
        created() {
            window.changeFloor= this.changeFloor
            window.iconBtn= this.iconBtn
            window.iconBtn2= this.iconBtn2
        },
        mounted() {
            this.map()
            this.initVideo()
            // this.first()
            var screeHeight = document.documentElement.clientHeight
            if(screeHeight < 605){
                this.height = 1
            }
        },
        methods: {
            back() {
                this.$router.go(-1);//返回上一层
            },
            // 获取店铺详情
            detail() {
                this.$api.get('/market/store/details?fid=90712010155', {}, response => {
                    if (response.status >= 200 && response.status < 300) {
                        console.log(response.data);
                        //请求成功，response为成功信息参数
                    } else {
                        console.log(response.message);
                        //请求失败，response为失败信息
                    }
                });
            },
            // 父组件调用子组件方法
            tipBoxs() {
                this.tipBox = true
                var height = document.documentElement.clientHeight
                document.getElementById('tipBox1').style.position = 'static'
                document.getElementById('tipBox1').style.height = height + 'px'
                document.getElementById('tipBox1').style.overflow = 'auto'
            },
            closeTip() {
                var x = document.getElementById("tip")
                x.className = "hidden";
                this.tipBox = false
                document.getElementById('tipBox1').style.position = 'absolute'
                document.getElementById('tipBox1').style.height = 'auto'
                document.getElementById('tipBox1').style.overflow = 'none'
            },
            closeClear() {
                var x = document.getElementById("cleaning")
                x.className = "hidden";
                this.barIndex6 = 2
                // this.$options.methods.findModelByFids.bind(this)(this.cleanDetail);
            },
            closeClear2() {
                var x = document.getElementById("cleaning2")
                x.className = "hidden";
                this.barIndex6 = 0
                // this.$options.methods.clearNaviLines.bind(this)();
                // this.$options.methods.deleteMarkerFuncImg.bind(this)();
                // this.$options.methods.deleteMarkerFunc.bind(this)();
            },
            closeClear3(){
                var x = document.getElementById("cleaning3")
                x.className = "hidden";
            },
            intention(fid) {
                // alert(fid)
                this.$router.push({path: "/intention", query: {fid: fid}})
            },
            // 电梯开始
            changeFacLayerVis(type) {
                // console.log(type,'/////')
                var map = this.isMap
                var flag = document.getElementById("input10").checked
                var group = (map.getFMGroup(map.focusGroupID)).groupID;
                // alert(1)
                this.$api.get('market/map/equiplist?type=' + type + '&floor=' + group, {}, response => {
                    if (response.status >= 200 && response.status < 300) {
                        // console.log(response.data.data);
                        var list = response.data.data
                        this.sheB = response.data.data
                        this.$options.methods.findModelByFid.bind(this)(list);
                    } else {
                        // console.log(response.message);
                        //请求失败，response为失败信息
                    }
                });
                // this.$options.methods.findModelByFid.bind(this)();


            },
            searchByParams: function (params) {
                var map = this.isMap
                var searchAnalyser = new fengmap.FMSearchAnalyser(map)
                var searchRequest = new fengmap.FMSearchRequest();
                //配置keyword参数
                if (params.keyword && params.keyword != '') {
                    searchRequest.keyword = params.keyword;
                }

                //配置groupID参数
                if (params.groupID) {
                    searchRequest.groupID = params.groupID
                }

                //配置FID参数
                if (params.FID) {
                    searchRequest.FID = params.FID;
                }
                //配置typeID参数
                if (params.typeID != null) {
                    searchRequest.typeID = params.typeID;
                }

                //配置nodeType参数
                if (params.nodeType != null) {
                    searchRequest.nodeType = params.nodeType;
                }
                //配置楼层参数
                if (params.groupID != null) {
                    searchRequest.groupID = params.groupID;
                }
                if (params.floors != null) {
                    searchRequest.floors = params.floors;
                }

                var sortRes = [];
                searchAnalyser.query(searchRequest, function (result) {
                    sortRes = result;
                });

                return sortRes;
            },
            findModelByFid: function (list) {
                // alert(1)
                // console.log(list, 'oooooo')
                var map = this.isMap
                var params = {};

                // params.FID = ["1043150101131","1043150101132"];
                params.FID = list
                params.nodeType = fengmap.FMNodeType.MODEL;
                var group = (map.getFMGroup(map.focusGroupID)).groupID;

                params.floors = group;
                var result = this.$options.methods.searchByParams.bind(this)(params);
                // console.log(result,'sssssss')
                if (result.length > 0) {
                    for (var i = 0; i < result.length; i++) {
                        var model = result[i];
                        var selectedModel = null
                        if (model != null) {
                            //视野中心移动到指定位置,如果不是当前聚焦层，将先设置目标层为聚焦层在跳转
                            //添加marker
                            // addMarkers(model);
                            //模型节点对象
                            var target = model.target;
                            //渲染当前设置的模型元素处于高亮状态
                            if (target) {
                                if (selectedModel && selectedModel.FID != target.FID) {
                                    selectedModel.selected = false;
                                }
                                target.selected = true;
                                selectedModel = target;
                            }
                        }
                    }

                }
            },
            findModelByFids: function (list) {
                var map = this.isMap
                var params = {};
                params.FID = list;
                params.nodeType = fengmap.FMNodeType.MODEL;
                // params.typeID = 140300;
                // params.groupID = 2;
                var group = (map.getFMGroup(map.focusGroupID)).groupID;
                params.floors = group;
                var result = this.$options.methods.searchByParams.bind(this)(params);
                if (result.length > 0) {
                    for (var i = 0; i < result.length; i++) {
                        var model = result[i];
                        var selectedModel = null
                        if (model != null) {
                            var target = model.target;
                            //渲染当前设置的模型元素处于高亮状态
                            if (target) {
                                if (selectedModel && selectedModel.FID != target.FID) {
                                    selectedModel.selected = false;
                                }
                                target.selected = false;
                                selectedModel = target;
                            }
                        }
                    }

                }
            },
            // 电梯结束
            // 电梯
            // 导航
            addMarkerFunc: function () {
                // this.dataArr = []
                var map = this.isMap
                var params = {};
                // params.FID = ["10347020128","1034702018","10347020119"];
                params.FID = this.securityList
                params.nodeType = fengmap.FMNodeType.MODEL;
                var group = (map.getFMGroup(map.focusGroupID)).groupID;
                params.floors = group;
                // console.log(params)
                var result = this.$options.methods.searchByParams.bind(this)(params);
                // console.log(result, '777')
                var dataArr = []
                var newObj = {}
                var resultArr = []
                var groupId = ''
                for (var i = 0; i < result.length; i++) {
                    var coordinate = result[i].mapCoord;
                    groupId = result[i].groupID;
                    resultArr.push(coordinate)
                }
                newObj.resultArr = resultArr
                newObj.groupId = groupId
                this.resultArr = resultArr
                // console.log(newObj,'\\\\')
                // console.log(resultArr,'1111')
                dataArr.push(newObj)
                var addLineState = true;
                var addMarker = true;
                if (addMarker) {
                    this.$options.methods.addMarkers.bind(this)();
                    addMarker = false;
                }
                if (addLineState) {
                    // console.log(2)
                    addLineState = false;
                    //配置第一条路径线的线型、线宽、透明度等参数
                    var lineStyle1 = {
                        //设置线的宽度
                        lineWidth: 8,
                        //设置线的透明度
                        alpha: 0.9,
                        url: require("./images/arrow.png"),
                        //是否开启平滑线功能
                        smooth: true,
                        //设置线的类型为导航线
                        lineType: fengmap.FMLineType.FMARROW,
                        //设置线动画,false为动画
                        noAnimate: true,
                        godColor: '#2F70FF',
                    };
                    //绘制第一条路径线
                    this.$options.methods.drawLines.bind(this)(dataArr, lineStyle1);
                }
            },
            drawLines: function (results, lineStyle) {
                // console.log(results)
                // console.log('0000')

                var map = this.isMap
                var naviLines = [];
                //创建路径线图层
                var line = new fengmap.FMLineMarker();
                //循环results中坐标点集合，通过坐标点绘制路径线
                // alert(results.length)
                for (var i = 0; i < results.length; i++) {
                    // alert(1)
                    // console.log(results, 'hhhh')
                    var result = results[i];
                    // console.log(result, 'hhhh')
                    var gid = result.groupId;
                    var points = result.resultArr;
                    // 创建FMSegment点集，一个点集代表一条折线
                    var seg = new fengmap.FMSegment();
                    seg.groupId = gid;
                    seg.points = points;
                    //将FMSegment绘制到线图层上
                    line.addSegment(seg);
                    //绘制线
                    map.drawLineMark(line, lineStyle);
                    naviLines.push(line);
                }
                // console.log(naviLines, '妈咪妈咪哄')
            },
            addMarkers: function () {
                var map = this.isMap
                var layer;
                var im;
                var group = map.getFMGroup(map.focusGroupID);
                // console.log(group, 'wwww')
                layer = group.getOrCreateLayer('imageMarker');
                // console.log(layer, 'kkk')
                //图标标注对象，默认位置为该楼层中心点
                var gpos = this.resultArr
                // var gpos = list
                // var gpos = {x: 13370193.875748783, y: 3544543.2271545995};
                // console.log(gpos)
                for (var i = 0; i < gpos.length; i++) {
                    im = new fengmap.FMImageMarker({
                        //标注x坐标点
                        x: gpos[i].x,
                        //标注y坐标点
                        y: gpos[i].y,
                        //设置图片路径
                        url: require('./images/Punch.png'),
                        //设置图片显示尺寸
                        size: 50,
                        //标注高度，大于model的高度
                        height: 4
                    });
                    // console.log(im)
                    layer.addMarker(im);
                }
            },
            //清除线标注
            clearNaviLines: function () {
                var map = this.isMap
                map.clearLineMark();
            },
            //清除图片标注
            deleteMarkerFuncImg: function () {
                var map = this.isMap
                var layer;
                var group = map.getFMGroup(map.focusGroupID);
                layer = group.getOrCreateLayer('imageMarker');
                //删除layer上所有Marker
                if (layer) {
                    layer.removeAll();
                }
            },
            //清除文字标注
            deleteMarkerFunc: function () {
                var map = this.isMap
                var layer;
                var group = map.getFMGroup(map.focusGroupID);
                layer = group.getOrCreateLayer('textMarker');
                //删除layer上所有Marker
                if (layer) {
                    layer.removeAll();
                }
            },
            // 热力图开始
            removeHeatmap() {
                // alert(2)
                var map = this.isMap
                // console.log(this.heatmapInstance2)
                // console.log('====')
                var heatmapInstance = this.heatmapInstance
                //获取显示楼层
                this.groupLayer = map.getFMGroup(map.focusGroupID);
                //移除应用热力图
                this.groupLayer.removeHeatMap(this.heatmapInstance2);
            },
            createDataHeatmap(map, groupID, data) {
                // alert(1)
                var heatmapInstance = this.heatmapInstance
                // var heatmapInstance = this.isList
                var map = this.isMap
                if (!heatmapInstance) {
                    heatmapInstance = fengmap.FMHeatMap.create(map, {
                        //热点半径
                        radius: 20,
                        //热力图透明度
                        opacity: .5,
                        //热力点value的最大值
                        max: 100,
                        //渐变色值，可配置
                        // gradient: {
                        //     0.45: "rgb(201,135,255)",
                        //     0.55: "rgb(189,97,255)",
                        //     0.65: "rgb(155,49,255)",
                        //     0.95: "yellow",
                        //     1.0: "rgb(157,53,255)"
                        // }
                    });
                    this.heatmapInstance2 = heatmapInstance

                    heatmapInstance.clearPoints();
                    //批量增加热点
                    heatmapInstance.addPoints(data);
                    //增加一个热点
                    //heatmapInstance.addPoint(12961625.166912202, 4861878.46667244, 50);

                    //热力图应用到哪一楼层
                    this.groupLayer = map.getFMGroup(groupID);
                    this.groupLayer.applyHeatMap(heatmapInstance);
                    // this.heatmapInstance = heatmapInstance
                }
            },
            showDtataHeatmap(type) {
                // this.$options.methods.removeHeatmap.bind(this)();
                var map = this.isMap
                var group = (map.getFMGroup(map.focusGroupID)).groupID;
                this.dataHeatmap = !this.dataHeatmap
                var dataHeatmap = this.dataHeatmap
                var heatMapData = []
                this.$api.get('market/map/hotchart?type=' + type + '&floor=' + group, {}, response => {
                    if (response.status >= 200 && response.status < 300) {
                        heatMapData = response.data.data
                        this.$options.methods.createDataHeatmap.bind(this)(map, map.focusGroupID, heatMapData);
                        //更改随机热力图显示状态
                        this.randomHeatmap = false;
                    } else {
                        // console.log(response.message);
                        //请求失败，response为失败信息
                    }
                });

            },
            // 热力图结束
            map: function () {
                var that = this
                var fmapID = 'huiyunquanlian123'; //mapId
                var map = new fengmap.FMMap({
                    container: document.getElementById('fengMap'), //渲染dom
                    appName: 'bimDemo',           //开发者应用名称
                    key: 'a3476b2a1a8fb8fcfd75422908f25610',  //开发者申请应用下web服务的key
                    defaultVisibleGroups: [1],           //设置初始显示楼层，数组格式，可单个，可多个
                    defaultFocusGroup: 1,
                    defaultControlsPose: fengmap.FMDirection.NORTH,
                    compassOffset: [20, 60],          //初始指北针的偏移量，[左，上]
                    compassSize: 8,
                    defaultThemeName: 'huiyunquanlian123',
                    defaultMapScaleLevel: 19,
                    defaultBackgroundColor:'#F9F9F9',
                    defaultControlsPose:1,
                });

                this.isMap = map
                map.openMapById(fmapID);
                // 楼层切换组件开始
                var screeHeight = document.documentElement.clientHeight
                if(screeHeight < 605){
                    this.height = 1
                }
                if(this.height == 1){
                    var toolControl = new fengmap.toolControl(map, {
                        init2D: false,   //初始化2D模式
                        groupsButtonNeeded: false,   //设置为false表示只显示2D,3D切换按钮
                        offset: {
                            x: -22,
                            y: 90
                        },
                        //点击按钮的回调方法,返回type表示按钮类型,value表示对应的功能值
                        clickCallBack: function (type, value) {
                            // console.log(type,value);
                        }
                    });
                }else{
                    var toolControl = new fengmap.toolControl(map, {
                        init2D: false,   //初始化2D模式
                        groupsButtonNeeded: false,   //设置为false表示只显示2D,3D切换按钮
                        offset: {
                            x: -22,
                            y: 172
                        },
                        //点击按钮的回调方法,返回type表示按钮类型,value表示对应的功能值
                        clickCallBack: function (type, value) {
                            // console.log(type,value);
                        }
                    });
                }

                var defaultFocusID = 1;
                //地图加载完成回调方法
                map.on('loadComplete', function () {
                    //创建楼层(按钮型)，创建时请在地图加载后(loadComplete回调)创建。
                    that.$options.methods.first.bind(that)();
                    document.getElementById('btnsFloor').style.display = 'block';
                    // var groupIDs = map.groupIDs.reverse();
                    var groupIDs = [4,3,2,1]
                    var ulHtml = '';
                    groupIDs.map(function (item, index) {
                        var className = item === defaultFocusID ? "active" : "changeFloor";
                        ulHtml += '<li class="' + className + '" onclick="changeFloor(this,' + item + ', ' + index + ')">F' + item + '</li>';
                    });

                    //楼层组件Dom
                    var ulDom = document.getElementById('floors');
                    ulDom.innerHTML = ulHtml;
                    // groupControl = new fengmap.scrollGroupsControl(map, ctlOpt);
                    var type = that.$route.query.type
                    var autity = that.$route.query.autity

                });
                map.on('mapScaleLevelChanged', function (level) {
                    console.log('map scaleLevel Changed!', level);

                });

                //点击地图事件
                map.on('mapClickNode', function (event) {
                    // console.log(event)
                    // var fid = event.target.typeID
                    // console.log(event.target.FID)
                    var fid = event.target.FID
                    if(that.barIndex == 0){
                        that.$api.get('market/store/cunsume?fid=' + fid, {}, response => {
                            if (response.status >= 200 && response.status < 300) {
                                that.cunsume = response.data.data
                                var x = document.getElementById("cleaning3")
                                x.className = "show";
                            } else {
                                // console.log(response.message);
                                //请求失败，response为失败信息
                            }
                        });

                    }
                    var typeID = event.target.typeID
                    that.typeID = typeID

                    var array = [200000, 180000, 100100, 170000, 100000, 160000, 190000, 190000, 150000, 120000, 140106, 100104,110000,140000]
                    const map1 = array.map(x => {
                        if (typeID == x) {
                            that.$api.get('market/store/details?fid=' + fid, {}, response => {
                                if (response.status >= 200 && response.status < 300) {
                                        // var x = document.getElementById("tip")
                                        // x.className = "show";
                                    that.marketDetail = response.data.data
                                    var leaseTime = response.data.data.leaseTime
                                    that.leaseTime = leaseTime.split("--")
                                    var spec = response.data.data.spec
                                    that.spec = spec.split("x")
                                    //请求成功，response为成功信息参数

                                } else {
                                    // console.log(response.message);
                                    //请求失败，response为失败信息
                                }
                            });

                        }
                    });
                    var array1 = [200004, 600014, 600013]
                    const map2 = array1.map(i => {
                        if (typeID == i) {
                            document.getElementById('equipment').style.display = 'block'
                            that.$api.get('market/map/equipdetail?fid=' + fid, {}, response => {
                                if (response.status >= 200 && response.status < 300) {
                                    // console.log(response.data.data);
                                    that.equipdetail = response.data.data
                                    // this.tableList = response.data.data
                                } else {
                                    console.log(response.message);
                                    //请求失败，response为失败信息
                                }
                            });
                        }
                    })
                    that.$options.methods.findModelByFids.bind(that)(that.cleanDetail);
                });
                map.on('focusGroupIDChanged', function (event) {
                    // console.log('地图聚焦楼层改变！', map.focusGroupID);
                });
            },
            // 自定义楼层切换组件
            changeViews(domObj) {
                // console.log(domObj.target)
                var map = this.isMap
                var multiFlag = this.multiFlag
                if (multiFlag) {
                    //切换为单楼层展示
                    this.showIndex = 0
                } else {
                    //切换为多楼层展示
                    this.showIndex = 1
                }

                //切换地图单层-false/多层展示-true
                multiFlag = !multiFlag;
                this.multiFlag = multiFlag
                //设置单/多楼层切换
                map.showSingerOrMultiGroup(multiFlag);
            },
            changeFloor(domObj, floorId, index) {
                var defaultIndex = this.defaultIndex;
                var defaultFocusID = this.defaultFocusID
                var map = this.isMap
                this.floorId = floorId
                var multiFlag = this.multiFlag
                if (map) {
                    //设置地图显示楼层
                    if (multiFlag) {
                        //展示全部楼层
                        map.visibleGroupIDs = map.groupIDs;
                    } else {
                        //展示单个楼层
                        map.visibleGroupIDs = [floorId];
                    }
                    // 设置地图聚焦楼层
                    map.focusGroupID = floorId;
                    //修改楼层样式
                    //取消选中上一次选中楼层
                    domObj.parentNode.children[defaultIndex].classList.remove('active');
                    domObj.parentNode.children[defaultIndex].classList.add('changeFloor');
                    //选中当前楼层
                    domObj.classList.add('active');
                    if(this.barIndex2 == 1){
                        var map = this.isMap
                        map.clearLineMark();
                        this.$options.methods.clearNaviLines.bind(this)();
                        this.$options.methods.deleteMarkerFunc.bind(this)();
                        this.$options.methods.deleteMarkerFuncImg.bind(this)();
                        var group = (map.getFMGroup(map.focusGroupID)).groupID;
                        this.$api.get('market/map/guardlist?floor=' + group, {}, response => {
                            if (response.status >= 200 && response.status < 300) {
                                this.cleanerlist = response.data.data
                                this.$options.methods.punchFloor.bind(this)();
                            } else {

                            }
                        });
                    }else if(this.barIndex2 == 2){
                        this.$options.methods.findModelByFids2.bind(this)(this.cleanDetail);
                    }else if(this.barIndex3 == 3){
                        this.$options.methods.change2.bind(this)();
                        this.barIndex3 = 0
                    }else if(this.barIndex3 == 2){
                        this.$options.methods.change2.bind(this)();
                        this.$options.methods.findModelByFids.bind(this)(this.lista);
                        var group = (map.getFMGroup(map.focusGroupID)).groupID;
                        this.$api.get('market/map/equiplist?type=200003&floor=' + group , {}, response => {
                            if (response.status >= 200 && response.status < 300) {
                                this.lista = response.data.data
                                var icon = require('./images/shebei3.png')
                                this.$options.methods.flash.bind(this)(response.data.data,icon);
                                this.$api.get('market/map/equiplist?type=200004&floor=' + group , {}, response => {
                                    if (response.status >= 200 && response.status < 300) {
                                        var icon = require('./images/shebei4.png')
                                        this.$options.methods.flash.bind(this)(response.data.data,icon);
                                        this.lista = this.lista.concat(response.data.data)
                                        this.$options.methods.findModelByFid.bind(this)(this.lista);
                                    } else {
                                    }
                                });
                            } else {
                                // console.log(response.message);
                                //请求失败，response为失败信息
                            }
                        });
                    }else if(this.barIndex3 == 1){
                        this.$options.methods.change2.bind(this)();
                        this.$options.methods.findModelByFids.bind(this)(this.lista);
                        var map = this.isMap
                        var group = (map.getFMGroup(map.focusGroupID)).groupID;
                        this.$api.get('market/map/equiplist?type=600004&floor=' + group , {}, response => {
                            if (response.status >= 200 && response.status < 300) {
                                this.lista = response.data.data
                                var icon = require('./images/shebei1.png')
                                this.$options.methods.flash.bind(this)(this.lista,icon);
                                this.$options.methods.findModelByFid.bind(this)(this.lista);
                            } else {

                                // console.log(response.message);
                                //请求失败，response为失败信息
                            }
                        });
                    }else if(this.barIndex == 0){
                        this.$options.methods.rentDivide2.bind(this)();
                        var group = (map.getFMGroup(map.focusGroupID)).groupID;
                        this.$api.get('market/store/cunsumeList?floor=' + group, {}, response => {
                            if (response.status >= 200 && response.status < 300) {
                                this.renta = response.data.data.low
                                this.rentb = response.data.data.high
                                this.$options.methods.rentDivide.bind(this)();

                            } else {

                            }
                        });
                    }
                    //更新选中楼层id及索引
                    this.defaultFocusID = floorId;
                    this.defaultIndex = index;
                }
            },
            // 保洁/保安人员
            // 设备弹框开始
            equipment() {
                alert(1)
            },
            equipment2() {
                document.getElementById('equipment').style.display = 'none'
                document.getElementById('video').style.display = 'none'
            },
            closeBtn() {
                document.getElementById('video').style.display = 'none'
            },
            // 设备弹框结束
            // 保洁人员弹框
            // 保洁人员弹框
            staff() {
                var map = this.isMap
                var that = this
                that.barIndex6 = 0
                var group = (map.getFMGroup(map.focusGroupID)).groupID;
                that.$api.get('market/map/cleanerlist?floor=' + group, {}, response => {
                    if (response.status >= 200 && response.status < 300) {
                        that.cleanerlist = response.data.data
                        var x = document.getElementById("cleaning")
                        x.className = "show";
                    } else {
                    }
                });
            },
            staff2() {
                var map = this.isMap
                var that = this
                that.barIndex6 = 1
                var group = (map.getFMGroup(map.focusGroupID)).groupID;
                that.$api.get('market/map/guardlist?floor=' + group, {}, response => {
                    if (response.status >= 200 && response.status < 300) {
                        that.cleanerlist = response.data.data
                        var x = document.getElementById("cleaning2")
                        x.className = "show";
                    } else {
                    }
                });
            },
            // 保洁人员负责区域
            cleaningBtn(list,idx) {
                this.cleanIdx = idx
                // console.log(idx)
                var cleanList = list.split("|")
                // console.log(cleanList)
                if (this.cleanDetail.length == 0) {
                    this.cleanDetail = cleanList
                    this.$options.methods.findModelByFid2.bind(this)(cleanList);
                    // var x = document.getElementById("cleaning")
                    // x.className = "hidden";
                } else {
                    this.$options.methods.findModelByFids2.bind(this)(this.cleanDetail);
                    this.cleanDetail = cleanList
                    this.$options.methods.findModelByFid2.bind(this)(cleanList);
                }

            },
            //保安
            security(router,idx) {
                this.cleanIdx2 = idx
                if (this.securityList.length == 0) {
                    var map = this.isMap
                    map.clearLineMark();
                    var securityList = router.split("|")
                    this.securityList = securityList
                    this.$options.methods.addMarkerFunc.bind(this)(securityList);
                } else {
                    var map = this.isMap
                    map.clearLineMark();
                    this.$options.methods.clearNaviLines.bind(this)();
                    this.$options.methods.deleteMarkerFunc.bind(this)();
                    this.$options.methods.deleteMarkerFuncImg.bind(this)();
                    var securityList = router.split("|")
                    this.securityList = securityList
                    this.$options.methods.addMarkerFunc.bind(this)(securityList);
                }

            },
            // 视频初始化
            initVideo() {
                //初始化视频方法
                // let myPlayer = this.$video(myVideo, {
                //     //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
                //     controls: true,
                //     //自动播放属性,muted:静音播放
                //     autoplay: "muted",
                //     //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
                //     preload: "auto",
                //     //设置视频播放器的显示宽度（以像素为单位）
                //     width: "750px",
                //     //设置视频播放器的显示高度（以像素为单位）
                //     height: "400px",
                //     autoDisable:false
                // });
            },
            btnClick() {
                document.getElementById('video').style.display = 'block'
                let myPlayer = this.$video(myVideo, {
                    //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
                    controls: true,
                    //自动播放属性,muted:静音播放
                    autoplay: "muted",
                    //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
                    preload: "auto",
                    //设置视频播放器的显示宽度（以像素为单位）
                    width: "750px",
                    //设置视频播放器的显示高度（以像素为单位）
                    height: "400px",
                    autoDisable: false
                });
            },
            // 集客力
            floatBar3(type) {
                if (this.a == 1) {
                    this.$options.methods.addPopInfoWindow4j.bind(this)();
                } else {
                    this.floatBarNum = type
                    this.$options.methods.addPopInfoWindow3.bind(this)(1);
                }
            },
            floatBar4(type) {
                if (this.a == 1) {
                    this.$options.methods.addPopInfoWindow3p.bind(this)();
                } else {
                    this.floatBarNum2 = type
                    this.$options.methods.addPopInfoWindow4.bind(this)(1);
                }
            },
            // 搜索框输入
            search() {
                var value = document.getElementById('search').value
                this.searchValue = value
            },
            searchBtn() {
                this.$api.get('market/home/search?name=' + this.searchValue, {}, response => {
                    if (response.status >= 200 && response.status < 300) {
                        // console.log(response.data.data.fid);
                        if (response.data.data.fid != null) {
                            var list = []
                            list.push(response.data.data.fid)
                            // console.log(list)
                            this.$options.methods.findModelByFid.bind(this)(list);
                            document.getElementById('search').value = ''
                        } else {
                            alert('请输入正确店铺名称')
                        }
                        //请求成功，response为成功信息参数
                    } else {
                        console.log(response.message);
                        //请求失败，response为失败信息
                    }
                });
            },
            // 点击能源
            barBtn1(){
                if(this.barIndex == 0){
                    this.$options.methods.deleteMarkerFuncImg.bind(this)();
                    this.$options.methods.rentDivide2.bind(this)();
                    this.barIndex = -1
                }else {
                    this.$options.methods.change2.bind(this)();
                    this.$options.methods.clearNaviLines.bind(this)();
                    this.$options.methods.deleteMarkerFunc.bind(this)();
                    this.$options.methods.deleteMarkerFuncImg.bind(this)();
                    var map = this.isMap
                    var group = (map.getFMGroup(map.focusGroupID)).groupID;
                    map.clearLineMark();
                    this.$api.get('market/store/cunsumeList?floor=' + group, {}, response => {
                        if (response.status >= 200 && response.status < 300) {
                            this.renta = response.data.data.low
                            this.rentb = response.data.data.high
                            this.$options.methods.rentDivide.bind(this)();

                        } else {

                        }
                    });
                    this.barIndex2 = 0
                    this.barIndex = 0
                    this.barIndex3 = 0
                }
            },
            // 点击人员
            barBtn2(){
                if(this.barIndex == 1){
                    this.barIndex = -1
                    this.barIndex2 = 0
                    var map = this.isMap
                    map.clearLineMark();
                    this.$options.methods.clearNaviLines.bind(this)();
                    this.$options.methods.deleteMarkerFunc.bind(this)();
                    this.$options.methods.deleteMarkerFuncImg.bind(this)();
                    this.$options.methods.findModelByFids2.bind(this)(this.cleanDetail);
                }else {
                    this.$options.methods.change2.bind(this)();
                    // this.$options.methods.findModelByFids.bind(this)(this.lista);
                    this.$options.methods.deleteMarkerFuncImg.bind(this)();
                    this.$options.methods.findModelByFids.bind(this)(this.lista);
                    this.$options.methods.rentDivide2.bind(this)();
                    var map = this.isMap
                    var group = (map.getFMGroup(map.focusGroupID)).groupID;
                    this.$api.get('market/map/guardlist?floor=' + group, {}, response => {
                        if (response.status >= 200 && response.status < 300) {
                            this.cleanerlist = response.data.data
                            this.$options.methods.punchFloor.bind(this)();
                        } else {

                        }
                    });
                    this.barIndex2 = 1
                    this.barIndex = 1
                    // this.barIndex2 = 0
                    this.barIndex3 = 0
                }
            },
            // 点击设备
            barBtn3(){
                if(this.barIndex == 2){
                    this.$options.methods.change2.bind(this)();
                    this.$options.methods.findModelByFids.bind(this)(this.lista);
                    this.barIndex = -1
                    this.barIndex2 = 0
                    this.barIndex3 = 0
                }else {
                    var map = this.isMap
                    map.clearLineMark();
                    this.$options.methods.change2.bind(this)();
                    this.$options.methods.rentDivide2.bind(this)();
                    this.$options.methods.clearNaviLines.bind(this)();
                    this.$options.methods.deleteMarkerFunc.bind(this)();
                    this.$options.methods.deleteMarkerFuncImg.bind(this)();
                    this.barIndex = 2
                    this.barIndex2 = 0
                    this.barIndex3 = 0
                }
            },
            // 点击保安
            barBtn4(){
                console.log(this.barIndex2)
                if(this.barIndex2 == 1){
                    var map = this.isMap
                    map.clearLineMark();
                    this.$options.methods.clearNaviLines.bind(this)();
                    this.$options.methods.deleteMarkerFunc.bind(this)();
                    this.$options.methods.deleteMarkerFuncImg.bind(this)();
                    this.barIndex2 = 0
                }else{
                    this.$options.methods.findModelByFids2.bind(this)(this.cleanDetail);
                    var map = this.isMap
                    var group = (map.getFMGroup(map.focusGroupID)).groupID;
                    this.$api.get('market/map/guardlist?floor=' + group, {}, response => {
                        if (response.status >= 200 && response.status < 300) {
                            this.cleanerlist = response.data.data
                            this.$options.methods.punchFloor.bind(this)();
                        } else {

                        }
                    });
                    this.barIndex2 = 1
                    this.barIndex6 = 0
                }
            },
            // 点击保洁
            barBtn5(){
                if(this.barIndex2 == 2){
                    this.barIndex2 = 0
                    this.$options.methods.findModelByFids2.bind(this)(this.cleanDetail);
                }else{
                    var map = this.isMap
                    map.clearLineMark();
                    this.$options.methods.clearNaviLines.bind(this)();
                    this.$options.methods.deleteMarkerFunc.bind(this)();
                    this.$options.methods.deleteMarkerFuncImg.bind(this)();
                    this.$options.methods.staff.bind(this)();
                    this.barIndex2 = 2
                }
            },
            // 安防
            barBtn6(){
                if(this.barIndex3 == 1){
                    this.barIndex3 = 0
                    this.$options.methods.findModelByFids.bind(this)(this.lista);
                    this.$options.methods.change2.bind(this)();
                }else{
                    this.$options.methods.change2.bind(this)();
                    this.$options.methods.findModelByFids.bind(this)(this.lista);
                    var map = this.isMap
                    var group = (map.getFMGroup(map.focusGroupID)).groupID;
                    this.$api.get('market/map/equiplist?type=600004&floor=' + group , {}, response => {
                        if (response.status >= 200 && response.status < 300) {
                            this.lista = response.data.data
                            var list = response.data.data
                            var num = response.data.data.length
                            var groupedArray1 = list.slice(0,num-2)
                            var groupedArray2 = list.slice(num-2,num)
                            var icon = require('./images/shebei1.png')
                            var icon2 = require('./images/shebei5.png')
                            this.$options.methods.findModelByFid.bind(this)(this.lista);
                            this.$options.methods.flash.bind(this)(groupedArray1,icon);
                            this.$options.methods.flash2.bind(this)(groupedArray2,icon2);
                        } else {
                        }
                    });
                    this.barIndex3 = 1
                }
            },
            // 电梯
            barBtn7(){
                if(this.barIndex3 == 2){
                    this.$options.methods.findModelByFids.bind(this)(this.lista);
                    this.$options.methods.change2.bind(this)();
                    this.barIndex3 = 0
                }else{
                    var map = this.isMap
                    this.$options.methods.change2.bind(this)();
                    this.$options.methods.findModelByFids.bind(this)(this.lista);
                    var group = (map.getFMGroup(map.focusGroupID)).groupID;
                    this.$api.get('market/map/equiplist?type=200003&floor=' + group , {}, response => {
                        if (response.status >= 200 && response.status < 300) {
                            this.lista = response.data.data
                            var list = response.data.data
                            var num = response.data.data.length
                            var groupedArray1 = list.slice(0,num-1)
                            var groupedArray2 = list.slice(num-1,num)
                            var icon = require('./images/shebei3.png')
                            var icon2 = require('./images/shebei6.png')
                            this.$options.methods.flash.bind(this)(groupedArray1,icon);
                            this.$options.methods.flash2.bind(this)(groupedArray2,icon2);
                            this.$api.get('market/map/equiplist?type=200004&floor=' + group , {}, response => {
                                if (response.status >= 200 && response.status < 300) {
                                    var icon = require('./images/shebei4.png')
                                    var icon2 = require('./images/shebei7.png')
                                    var list = response.data.data
                                    var num = response.data.data.length
                                    var groupedArray1 = list.slice(0,num-1)
                                    var groupedArray2 = list.slice(num-1,num)
                                    this.$options.methods.flash.bind(this)(groupedArray1,icon);
                                    this.$options.methods.flash2.bind(this)(groupedArray2,icon2);
                                    this.lista = this.lista.concat(response.data.data)
                                    this.$options.methods.findModelByFid.bind(this)(this.lista);
                                } else {
                                }
                            });
                        } else {
                            // console.log(response.message);
                            //请求失败，response为失败信息
                        }
                    });
                    this.barIndex3 = 2
                }
            },
            // 门禁
            barBtn8(){
                if(this.defaultFocusID == 1){
                    if(this.barIndex3 == 3){
                        this.$options.methods.findModelByFids.bind(this)(this.lista);
                        this.$options.methods.change2.bind(this)();
                        this.barIndex3 = 0
                    }else{
                        this.$options.methods.findModelByFids.bind(this)(this.lista);
                        this.$options.methods.change2.bind(this)();
                        var map = this.isMap
                        var group = (map.getFMGroup(map.focusGroupID)).groupID;
                        this.$api.get('market/map/equiplist?type=200001&floor=' + group , {}, response => {
                            if (response.status >= 200 && response.status < 300) {
                                this.lista = response.data.data
                                var num = response.data.data.length
                                var groupedArray1 = this.lista.slice(0,num-1)
                                var groupedArray2 = this.lista.slice(num-1,num)
                                var icon = require('./images/shebei2.png')
                                var icon2 = require('./images/shebei8.png')
                                this.$options.methods.findModelByFid.bind(this)(this.lista);
                                this.$options.methods.flash.bind(this)(groupedArray1,icon);
                                this.$options.methods.flash2.bind(this)(groupedArray2,icon2);
                            } else {
                            }
                        });
                        this.barIndex3 = 3
                    }
                }else{
                    document.getElementById('control').style.display = 'block'
                }

            },
             // 当前楼层的打卡路线
            punchFloor(){
                var map = this.isMap
                var params1 = {};
                var list = this.cleanerlist[0].route.split("|")
                params1.FID = list
                params1.nodeType = fengmap.FMNodeType.MODEL;
                var group = (map.getFMGroup(map.focusGroupID)).groupID;
                params1.floors = group;
                // console.log(params)
                var result = this.$options.methods.searchByParams.bind(this)(params1);
                // console.log(result, '777')
                var dataArr1 = []
                var newObj = {}
                var resultArr = []
                var groupId = ''
                for (var i = 0; i < result.length; i++) {
                    var coordinate = result[i].mapCoord;
                    groupId = result[i].groupID;
                    resultArr.push(coordinate)
                }
                newObj.resultArr = resultArr
                newObj.groupId = groupId
                this.resultArr = resultArr
                // console.log(newObj,'\\\\')
                // console.log(resultArr,'1111')
                dataArr1.push(newObj)
                var addLineState = true;
                var addMarker = true;
                if (addLineState) {
                    addLineState = false;
                    //配置第一条路径线的线型、线宽、透明度等参数
                    var lineStyle1 = {
                        //设置线的宽度
                        lineWidth: 4,
                        //设置线的透明度
                        alpha: 0.9,
                        url: require("./images/arrow.png"),
                        //是否开启平滑线功能
                        smooth: true,
                        //设置线的类型为导航线
                        lineType: fengmap.FMLineType.FMARROW,
                        //设置线动画,false为动画
                        noAnimate: true,
                        godColor: '#2F70FF',
                    };
                    //绘制第一条路径线
                    this.$options.methods.drawLines.bind(this)(dataArr1, lineStyle1);

                }

                var params2 = {};
                var list2 = this.cleanerlist[1].route.split("|")
                params2.FID = list2
                params2.nodeType = fengmap.FMNodeType.MODEL;
                var group = (map.getFMGroup(map.focusGroupID)).groupID;
                params2.floors = group;
                var result = this.$options.methods.searchByParams.bind(this)(params2);
                // console.log(result, '777')
                var dataArr2 = []
                var newObj = {}
                var resultArr = []
                var groupId = ''
                for (var i = 0; i < result.length; i++) {
                    var coordinate = result[i].mapCoord;
                    groupId = result[i].groupID;
                    resultArr.push(coordinate)
                }
                newObj.resultArr = resultArr
                newObj.groupId = groupId
                this.resultArr = resultArr
                // console.log(newObj,'\\\\')
                // console.log(resultArr,'1111')
                dataArr2.push(newObj)
                var addLineState = true;
                var addMarker = true;
                if (addLineState) {
                    addLineState = false;
                    //配置第一条路径线的线型、线宽、透明度等参数
                    var lineStyle1 = {
                        //设置线的宽度
                        lineWidth: 4,
                        //设置线的透明度
                        alpha: 0.9,
                        url: require("./images/arrow.png"),
                        //是否开启平滑线功能
                        smooth: true,
                        //设置线的类型为导航线
                        lineType: fengmap.FMLineType.FMARROW,
                        //设置线动画,false为动画
                        noAnimate: true,
                        godColor: '#2F70FF',
                    };
                    //绘制第一条路径线
                    this.$options.methods.drawLines.bind(this)(dataArr2, lineStyle1);

                }
            },
            // 保洁负责区域
            findModelByFid2: function (list) {
                var map = this.isMap
                var params = {};
                params.FID = list
                params.nodeType = fengmap.FMNodeType.MODEL;
                var group = (map.getFMGroup(map.focusGroupID)).groupID;

                params.floors = group;
                var result = this.$options.methods.searchByParams.bind(this)(params);
                // console.log(result,'sssssss')
                if (result.length > 0) {
                    for (var i = 0; i < result.length; i++) {
                        var model = result[i];
                        var selectedModel = null
                        // console.log(model, 'bbbbbbbbb')
                        if (model != null) {
                            //视野中心移动到指定位置,如果不是当前聚焦层，将先设置目标层为聚焦层在跳转
                            var coord = {
                                x: model.mapCoord.x,
                                y: model.mapCoord.y,
                                groupID: model.groupID
                            };
                            // console.log(coord,'ddddddd')
                            map.moveTo(coord);

                            //模型节点对象
                            var target = model.target;
                            //渲染当前设置的模型元素处于高亮状态
                            if (target) {
                                model.target.setColor('#B760F9')
                            }
                        }
                    }

                }
            },
            findModelByFids2: function (list) {
                var map = this.isMap
                var params = {};
                params.FID = list;
                params.nodeType = fengmap.FMNodeType.MODEL;
                // params.typeID = 140300;
                // params.groupID = 2;
                var group = (map.getFMGroup(map.focusGroupID)).groupID;
                params.floors = group;
                var result = this.$options.methods.searchByParams.bind(this)(params);
                if (result.length > 0) {
                    for (var i = 0; i < result.length; i++) {
                        var model = result[i];
                        var selectedModel = null
                        if (model != null) {
                            var target = model.target;
                            //渲染当前设置的模型元素处于高亮状态
                            if (target) {
                                target.setColorToDefault()
                            }
                        }
                    }

                }
            },
            // 关闭门禁提示框
            closeControl(){
                document.getElementById('control').style.display = 'none'
            },
            // 能源划分
            rentDivide(){
                var map = this.isMap
                var params1 = {};
                params1.FID = this.renta
                params1.nodeType = fengmap.FMNodeType.MODEL;
                var group = (map.getFMGroup(map.focusGroupID)).groupID;
                params1.floors = group;
                var result1 = this.$options.methods.searchByParams.bind(this)(params1);
                if (result1.length > 0) {
                    for (var i = 0; i < result1.length; i++) {
                        var model = result1[i];
                        var selectedModel = null
                        if (model != null) {
                            var target = model.target;
                            //渲染当前设置的模型元素处于高亮状态
                            if (target) {
                                model.target.setColor('#72DEB4')
                                // target.setColorToDefault()
                            }
                        }
                    }

                }
                var params3 = {};
                params3.FID = this.rentb
                params3.nodeType = fengmap.FMNodeType.MODEL;
                // var group = (map.getFMGroup(map.focusGroupID)).groupID;
                params3.floors = group;
                var result3 = this.$options.methods.searchByParams.bind(this)(params3);
                if (result3.length > 0) {
                    for (var i = 0; i < result3.length; i++) {
                        var model = result3[i];
                        var selectedModel = null
                        if (model != null) {
                            var target = model.target;
                            //渲染当前设置的模型元素处于高亮状态
                            if (target) {
                                model.target.setColor('#FF7866')
                                // target.setColorToDefault()
                            }
                        }
                    }

                }
            },
            rentDivide2(){
                var map = this.isMap
                var params1 = {};
                params1.FID = this.renta
                params1.nodeType = fengmap.FMNodeType.MODEL;
                var group = (map.getFMGroup(map.focusGroupID)).groupID;
                params1.floors = group;
                var result1 = this.$options.methods.searchByParams.bind(this)(params1);
                if (result1.length > 0) {
                    for (var i = 0; i < result1.length; i++) {
                        var model = result1[i];
                        var selectedModel = null
                        if (model != null) {
                            var target = model.target;
                            //渲染当前设置的模型元素处于高亮状态
                            if (target) {
                                // model.target.setColor('#72DEB4')
                                target.setColorToDefault()
                            }
                        }
                    }

                }
                var params3 = {};
                params3.FID = this.rentb
                params3.nodeType = fengmap.FMNodeType.MODEL;
                // var group = (map.getFMGroup(map.focusGroupID)).groupID;
                params3.floors = group;
                var result3 = this.$options.methods.searchByParams.bind(this)(params3);
                if (result3.length > 0) {
                    for (var i = 0; i < result3.length; i++) {
                        var model = result3[i];
                        var selectedModel = null
                        if (model != null) {
                            var target = model.target;
                            //渲染当前设置的模型元素处于高亮状态
                            if (target) {
                                // model.target.setColor('#FF7866')
                                target.setColorToDefault()
                            }
                        }
                    }

                }
            },
            first(){
                var map = this.isMap
                var group = (map.getFMGroup(map.focusGroupID)).groupID;
                this.$api.get('market/store/cunsumeList?floor=' + group, {}, response => {
                    if (response.status >= 200 && response.status < 300) {
                        this.renta = response.data.data.low
                        this.rentb = response.data.data.high
                        this.$options.methods.rentDivide.bind(this)();

                    } else {

                    }
                });
            },
            // 安防门禁点标记
            addMarkers2: function (list,icon) {
                var map = this.isMap
                var layer;
                var im;
                var group = map.getFMGroup(map.focusGroupID);
                // console.log(group, 'wwww')
                layer = group.getOrCreateLayer('imageMarker');
                // console.log(layer, 'kkk')
                //图标标注对象，默认位置为该楼层中心点
                // var gpos = this.resultArr
                var gpos = list
                // var gpos = {x: 13370193.875748783, y: 3544543.2271545995};
                // console.log(gpos)
                for (var i = 0; i < gpos.length; i++) {
                    im = new fengmap.FMImageMarker({
                        //标注x坐标点
                        x: gpos[i].x,
                        //标注y坐标点
                        y: gpos[i].y,
                        //设置图片路径
                        url: icon,
                        //设置图片显示尺寸
                        size: 50,
                        //标注高度，大于model的高度
                        height: 4
                    });
                    // console.log(im)
                    layer.addMarker(im);
                }
            },
            // 添加动图icon
            flash(list,icon) {
                var map = this.isMap
                var params = {};
                // console.log(list)
                // params.FID = ["1034701014","10347010113","10347010118"];
                params.FID = list
                params.nodeType = fengmap.FMNodeType.MODEL;
                var group = (map.getFMGroup(map.focusGroupID)).groupID;
                params.floors = group;
                var result = this.$options.methods.searchByParams.bind(this)(params);

                let startArert = false;
                var map = this.isMap
                var group = map.getFMGroup(map.focusGroupID);
                // let alertMars = [];
                var zf_x = 1;
                var zf_y = 1;
                var img = icon
                if (result.length > 0) {
                    for (var i = 0; i < result.length; i++) {
                        var model = result[i];
                        var selectedModel = null
                        if (null != model) {
                            let domMarker = new fengmap.FMDomMarker({
                                x: model.mapCoord.x,
                                y: model.mapCoord.y,
                                height: 5,
                                domWidth: '30',
                                domHeight: '30',
                                // domContent: '<div class="container"><div class="dot">啦啦啦</div><div class="pulse"></div><div class="pulse-big"></div></div>',
                                domContent: '<img onclick="iconBtn()" style="height:50px;height:50px;" src="' + img + '">',
                                anchor: fengmap.FMMarkerAnchor.BOTTOM

                            });
                            this.dmLayer = map.getFMGroup(map.focusGroupID).getOrCreateLayer('domMarker');
                            this.dmLayer.addMarker(domMarker);
                            this.alertMars.push(domMarker);

                        }
                    }

                }

                if (Math.random() < 0.25) {
                    zf_x = 1;
                    zf_y = 1;
                } else if (Math.random() >= 0.25 && Math.random() < 0.5) {
                    zf_x = -1;
                    zf_y = 1;
                } else if (Math.random() >= 0.5 && Math.random() < 0.75) {
                    zf_x = -1;
                    zf_y = -1;
                } else {
                    zf_x = 1;
                    zf_y = -1;
                }
                // console.log(1)
            },
            flash2(list,icon) {
                var map = this.isMap
                var params = {};
                // params.FID = ["1034701014","10347010113","10347010118"];
                params.FID = list
                params.nodeType = fengmap.FMNodeType.MODEL;
                var group = (map.getFMGroup(map.focusGroupID)).groupID;
                params.floors = group;
                var result = this.$options.methods.searchByParams.bind(this)(params);

                let startArert = false;
                var map = this.isMap
                var group = map.getFMGroup(map.focusGroupID);
                // let alertMars = [];
                var zf_x = 1;
                var zf_y = 1;
                var img = icon
                if (result.length > 0) {
                    for (var i = 0; i < result.length; i++) {
                        var model = result[i];
                        var selectedModel = null
                        if (null != model) {
                            let domMarker = new fengmap.FMDomMarker({
                                x: model.mapCoord.x,
                                y: model.mapCoord.y,
                                height: 5,
                                domWidth: '30',
                                domHeight: '30',
                                // domContent: '<div class="container"><div class="dot">啦啦啦</div><div class="pulse"></div><div class="pulse-big"></div></div>',
                                domContent: '<img onclick="iconBtn2()" style="height:50px;height:50px;" src="' + img + '">',
                                anchor: fengmap.FMMarkerAnchor.BOTTOM

                            });
                            this.dmLayer = map.getFMGroup(map.focusGroupID).getOrCreateLayer('domMarker');
                            this.dmLayer.addMarker(domMarker);
                            this.alertMars.push(domMarker);

                        }
                    }

                }

                if (Math.random() < 0.25) {
                    zf_x = 1;
                    zf_y = 1;
                } else if (Math.random() >= 0.25 && Math.random() < 0.5) {
                    zf_x = -1;
                    zf_y = 1;
                } else if (Math.random() >= 0.5 && Math.random() < 0.75) {
                    zf_x = -1;
                    zf_y = -1;
                } else {
                    zf_x = 1;
                    zf_y = -1;
                }
                // console.log(1)
            },
            // 清除动图icon
            change2(){
                // 清除动图icon
                if (this.dmLayer) {
                    this.dmLayer.removeAll();
                    this.alertMars=[];
                }

                // 色块选中清除
                // this.$options.methods.findModelByFids.bind(this)(1);
            },
            iconBtn(){
                // alert(1)
            }
        }
    }
</script>

<style scoped lang="scss">
    /*@import "./css/style.css";*/
    body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        font-family: font1 !important;
    }
    #fengMap {
        position: absolute;
        width:100%;
        height: 100%;
    }
    .rentColor{
        position: fixed;
        top: 70px;
        z-index: 10;
        left: 26px;
    }
    /*顶部侧拉导航*/
    /deep/ .el-drawer__wrapper {
        width: 100% !important;
    }

    /*正常故障*/
    .stateThis{
        position: fixed;
        top: 60px;
        left: 10px;
        display: flex;
        align-items: center;
    }
    .stateThis-img{
        width: 40px;
        height: 40px;
    }
    .stateThis-txt{
        color: #666666;
        font-size: 13px;
        margin-right: 10px;
    }


    .video-js {
        width: 375px;
        margin-top: 140px;
        z-index: 1000;
    }

    /*自定义楼层切换组件*/
    .btnsFloor span{
        display: block;
        width: 100%;
        height: 40px;
        line-height: 40px;
        text-align: center;
        cursor: pointer;
        background: url(./images/layer.png) no-repeat center;
        background-size: 80% 80%;
    }
    .btnsFloor2 span{
        display: block;
        width: 100%;
        height: 40px;
        line-height: 40px;
        text-align: center;
        cursor: pointer;
        background: url(./images/layer.png) no-repeat center;
        background-size: 80% 80%;
    }
    .btnsFloor{
        width: 40px;
        height: 180px;
        background: #fff;
        position: fixed;
        right: 20px;
        top: 280px;
        border-radius: 22px;
    }
    .btnsFloor2{
        width: 40px;
        height: 180px;
        background: #fff;
        position: fixed;
        right: 20px;
        top: 200px;
        border-radius: 22px;
    }
    .btnsFloor span.multi{
        background: url(./images/layers.png) no-repeat center !important;
        background-size: 60% 60%;
        width: 100%;
        height: 40px;
    }
    .btnsFloor2 span.multi{
        background: url(./images/layers.png) no-repeat center !important;
        background-size: 60% 60%;
        width: 100%;
        height: 40px;
    }
    #floors{
        margin-top: 10px;
        font-family: font2;
    }
    .changeFloor{
        font-size: 12px;
        color: #333333;
        width: 40 px;
        height: 40px !important;
        margin: 0 auto;
        line-height: 40px !important;
    }
    .active{
        font-size: 12px;
        color: #255ED7;
        width: 40px;
        height: 40px !important;
        margin: 0 auto;
        line-height: 40px !important;
    }
    /*2D 3D切换*/
    .fm-control-tool-3d{
        border-radius: 50% !important;
        background-size: 20px auto !important;
        background-position:center !important;
        box-shadow:0px 1px 13px 2px rgba(0,0,0,0.06) !important;
        width: 30px !important;
        height: 30px !important;
    }

    /*视频播放结束*/
    .bar {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        position: fixed;
        height: 48px;
        top: 0;
        left: 0;
        width: 100%;
        /*background: #fff;*/
        /*box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.06);*/
        position: relative;

        .returnImg {
            width: 10px;
            height: 19px;
            left: 16px;
            position: absolute;
            top: 14px;
        }

        .search {
            width: 273px;
            height: 32px;
            background: rgba(241, 241, 241, 1);
            border-radius: 17px;
            margin-left: 50px;
            padding: 0px 16px;
            box-sizing: border-box;
            display: flex;
            justify-content: flex-start;

            input {
                background: none;
                outline: none;
                border: none;
                font-size: 16px;
                line-height: 25px;
            }
        }

        .select {
            margin-left: 20px;

            .title {
                width: 100%;
                height: 23px;
                background: rgba(242, 242, 242, 1);
                margin-top: 17px;
                font-size: 13px;
                font-weight: 400;
                color: rgba(153, 153, 153, 1);
                line-height: 23px;
                text-align: left;
                padding: 0 0 0 18px;
                box-sizing: border-box;
            }

            .list {
                width: 100%;
                /*height: 190px;*/
                box-sizing: border-box;
                display: flex;
                flex-wrap: wrap;

                .listTag {
                    width: 33.3%;
                    height: 80px;
                    margin-top: 8px;

                    .listBox {
                        margin: 10px auto;
                        font-size: 14px;
                        font-family: SourceHanSansCN-Regular, SourceHanSansCN;
                        font-weight: 400;
                        color: rgba(102, 102, 102, 1);
                    }
                }
            }
        }

    }

    a {
        color: #fff;
    }

    /deep/ .fm-control-groups {
        z-index: 99 !important;
    }

    /deep/ .fm-control-popmarker {
        padding: 0 !important;
        text-align: left;
        background: #6494FF !important;
        border: none !important;
        color: #fff !important;
        z-index: 1 !important;
        -webkit-appearance: none !important;

        div {
            height: 20px !important;
            margin-top: 8px !important;

            p {
                text-align: center !important;

            }
        }
    }

    /deep/ .fm-control-popmarker-closebtn {
        width: 20px !important;
        height: 20px !important;
        background: #fff !important;
        top: 6px !important;
        display: none !important;
        opacity: 0.1 !important;
        overflow: hidden !important;
        -webkit-appearance: none !important;
    }

    /deep/ .fm-control-popmarker-top {
        width: 2px !important;
        height: 10px !important;
        border-left: 0px solid transparent !important;
        border-right: 10px solid transparent !important;
        border-top: 10px solid #6494FF !important;
        left: 0px !important;
        bottom: -34px !important;
        -webkit-appearance: none !important;
    }

    /deep/ .fm-control-popmarker-bot {
        display: none !important;
        -webkit-appearance: none !important;
    }

    p {
        text-align: left;
    }

    body {
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

    #fengMap {
        position: absolute;
        width: 100%;
        height: 100%;
    }

    .details {
        width: 100%;
        height: 200px;
        position: fixed;
        bottom: 0;
        left: 0;
        background: #000;
    }



    #tip {
        visibility: hidden;
        width: 100%;
        /*height: 200px;*/
        background: #fff;
        color: white;
        position: fixed;
        bottom: 0;
        left: 0;
        box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.06);
        border-radius: 10px 10px 0px 0px;
    }

    #tip.show {
        visibility: visible;
        animation: fadein .6s, fadeout 0.5s 1.2s;
    }

    @keyframes fadein {
        from {
            opacity: 0.8;
            bottom: -160px;
        }
        to {
            opacity: 1;
            bottom: 0px;
        }
    }


    @keyframes fadeout {
        /*from {bottom: 30px; opacity: 1;}*/
        /*to {bottom: 0; opacity: 0;}*/
    }

    /*设备弹框*/
    .equipment {
        width: 100%;
        height: 100%;
        /*background: rgba(0, 0, 0, 0.6);*/
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1000;

        .equipment2 {
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
            position: fixed;
            top: 0;
            left: 0;
            z-index: -1;
        }

        .equipmentBox {
            width: 270px;
            /*height: 200px;*/
            margin: 200px auto 0 auto;
            border-radius: 8px;
            background: #fff;
            padding-bottom: 18px;
            /*z-index: 9999;*/
        }
    }

    /*设备弹框结束*/

    /*弹框*/
    .tipBox {
        .tipTop {
            margin: 0 20px;
            border-bottom: 0.5px solid #E8E8E8;
            padding-bottom: 14px;
            display: flex;
        }

        .tipTops {
            margin: 0 20px;
            border-bottom: 0.5px solid #E8E8E8;
            padding-bottom: 17px;
        }

        .tipBottom {
            margin: 16px 20px 0px 20px;
            padding-bottom: 100px;

            .tipTitle {
                font-size: 12px;
                color: #666666;
                margin-top: 15px;

            }

            .tipTitle-txt {
                display: flex;
                align-items: center;
                margin-top: 13px;

                p {
                    font-size: 15px;
                    color: #333333;

                }

                span {
                    font-size: 14px;
                    color: #F84D4D;
                    border-bottom: 0.5px solid #F84D4D;
                    margin-left: 10px;
                    padding-bottom: 2px;
                }
            }

            /*建筑规格*/
            .architecture {
                padding-top: 16px;
                padding-bottom: 22px;
                border-top: 0.5px solid #E8E8E8;
                border-bottom: 0.5px solid #E8E8E8;
                display: flex;
                align-items: center;
                margin-top: 16px;

                .architecture-left {
                    margin-left: 13px;

                    .architectureName {
                        font-size: 15px;
                        color: #333333;
                        margin-bottom: 8px;
                    }
                }
            }
        }
    }

    /*保洁人员弹框*/
    #cleaning {
        visibility: hidden;
        width: 100%;
        /*height: 200px;*/
        background: #fff;
        color: white;
        position: fixed;
        bottom: 0;
        left: 0;
        box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.06);
        border-radius: 10px 10px 0px 0px;

        .cleaningList {
            width: 330px;
            margin: 10px auto 20px auto;

            .cleaningList-detail {
                width: 100%;
                height: 36px;
                display: flex;
                align-items: center;
                background: #fff;
            }
            .cleaningList-detail2 {
                width: 100%;
                height: 36px;
                display: flex;
                align-items: center;
                background: #F5F5F5;
            }

            /*.cleaningList-detail:hover {*/
            /*    background: #F5F5F5;*/
            /*}*/
        }
    }

    #cleaning.show {
        visibility: visible;
        animation: fadein 0.6s, fadeout 0.5s 1.2s;
    }

    /*保洁人员弹框*/
    #cleaning2 {
        visibility: hidden;
        width: 100%;
        /*height: 200px;*/
        background: #fff;
        color: white;
        position: fixed;
        bottom: 0;
        left: 0;
        box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.06);
        border-radius: 10px 10px 0px 0px;

        .cleaningList {
            width: 330px;
            margin: 10px auto 20px auto;

            .cleaningList-detail {
                width: 100%;
                height: 36px;
                display: flex;
                align-items: center;
                background: #fff;
            }

            .cleaningList-detail2 {
                width: 100%;
                height: 36px;
                display: flex;
                align-items: center;
                background: #F5F5F5;
            }
        }
    }

    #cleaning2.show {
        visibility: visible;
        animation: fadein 1s, fadeout 0.5s 1.2s;
    }


    @keyframes fadein {
        from {
            opacity: 0.8;
            bottom: -160px;
        }
        to {
            opacity: 1;
            bottom: 0px;
        }
    }


    @keyframes fadeout {
        /*from {bottom: 30px; opacity: 1;}*/
        /*to {bottom: 0; opacity: 0;}*/
    }

    /*能源*/
    #cleaning3 {
        visibility: hidden;
        width: 100%;
        /*height: 200px;*/
        background: #fff;
        color: white;
        position: fixed;
        bottom: 0;
        left: 0;
        box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.06);
        border-radius: 10px 10px 0px 0px;

        .cleaningList {
            width: 345px;
            margin: 10px auto 20px auto;

            .cleaningList-detail {
                width: 100%;
                height: 36px;
                display: flex;
                align-items: center;
                background: #fff;
            }

            .cleaningList-detail2 {
                width: 100%;
                height: 36px;
                display: flex;
                align-items: center;
                background: #F5F5F5;
            }
        }
    }
    #cleaning3.show {
        visibility: visible;
        animation: fadein 1s, fadeout 0.5s 1.2s;
    }
    @keyframes fadein {
        from {
            opacity: 0.8;
            bottom: -160px;
        }
        to {
            opacity: 1;
            bottom: 0px;
        }
    }

    /*客流量*/
    .floatBar {
        width: 340px;
        height: 39px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.06);
        border-radius: 4px;
        margin: 10px auto;
        display: flex;
        justify-content: flex-start;
        padding: 14px 16px;
        box-sizing: border-box;

        .people {
            font-size: 12px;
            font-family: SourceHanSansCN-Regular, SourceHanSansCN;
            font-weight: 400;
            color: rgba(51, 51, 51, 1);
            display: flex;
            justify-content: flex-start;
            margin-left: 10px;
        }
    }

    .floatBar3 {
        border-bottom: 4px solid #3B78FF;
        padding-bottom: 12px;
        color: #3B78FF;
    }
    /*底部bar*/
    .mapBar{
        width: 100%;
        height: 100px;
        position: fixed;
        background: #F9F9F9;
        box-shadow:0px 1px 13px 0px rgba(212,212,212,1);
        border-radius:10px 10px 1px 1px;
        bottom: 0;
        left: 0;
        z-index: 11;
        display: flex;
    }
    .mapBar-img{
        width: 78px;
        height: 78px;
        margin-top: 10px;
    }
    .mapBar-img2{
        width: 78px;
        height: 78px;
    }
    /*保安保洁*/
    .mapPeople{
        position: absolute;
        bottom: 90px;
        left: -66px;
        z-index: 10;
        width: 210px;
        height: 78px;
        background-image: url("./images/map7.png");
        background-size: 100% auto;
        display: flex;
    }
    .mapPeople-box{
        display: flex;
        align-items: center;
        height: 36px;
        margin-left: 30px;margin-top: 18px;
    }
    .mapPeople-box2{
        display: flex;
        align-items: center;
        height: 36px;
        margin-left: 28px;margin-top: 18px;
    }
    .mapPeople-box3{
        display: flex;
        align-items: center;
        height: 36px;
        margin-left: 32px;margin-top: 18px;
    }
    .mapPeople-box4{
        display: flex;
        align-items: center;
        height: 36px;
        margin-left: 20px;margin-top: 18px;
    }
    .mapPeople-name{
        margin-left: 6px;
        font-size: 11px;
        color: #666666;
    }
    .mapPeople-name2{
        margin-left: 6px;
        font-size: 11px;
        color: #255ED7;
    }
    /*设备信息*/
    .mapInformation{
        position: absolute;
        bottom: 90px;
        right: -46px;
        z-index: 10;
        width: 290px;
        height: 78px;
        background-image: url("./images/map13.png");
        background-size: 100% auto;
        display: flex;
    }
    .controlBox{
        position: fixed;top: 0;left: 0;width: 100%;height: 100%;background:rgba(0,0,0,0.68);
        z-index: 11;
    }
    .controlBox2{
        width: 256px;height:188px;border-radius: 10px;background: #fff;position: fixed;top: 196px;left: 58px;z-index: 12;
    }
</style>
